前人未踏の領域へ アプリ開発編

Android, iOSアプリ開発に関する調査メモ置き場。ほとんどAndroid。古い記事にはアプリ以外も含まれます。

Jetpack Compose: widthとpaddingの関係について

Jetpack Compseで Compsableにpaddingの挙動が気になったのでちょっと確認してみた。

@Preview(name = "PaddingとWidthの確認", showBackground = true)
@Composable
fun BoxPreview() {
    Surface(
        modifier = Modifier
            .padding(20.dp)
            .width(200.dp)
            .height(200.dp), color = Color.LightGray
    ) {
        Card(
            modifier = Modifier
                .padding(20.dp)
                .fillMaxWidth(1F)
                .fillMaxHeight(1F), backgroundColor = Color.Cyan
        ) {

        }
    }
}

するとこうなる。罫線は10dpごとについている

f:id:takeR:20210123034652p:plain

  • paddingは指定したComposableの子要素ではなく、Composable自身に適用される
  • paddingはwitdh, heightで指定した箇所の外に適用される(上記の例では計20dp + 200dp + 20dp = 240dp使う)

PaddingがComposable自身に適用されるのに違和感がある。 親や子のComposableの設定にも影響を受けるかもしれないけどそっちの確認はまた今度。