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ごとについている
- paddingは指定したComposableの子要素ではなく、Composable自身に適用される
- paddingはwitdh, heightで指定した箇所の外に適用される(上記の例では計20dp + 200dp + 20dp = 240dp使う)
PaddingがComposable自身に適用されるのに違和感がある。 親や子のComposableの設定にも影響を受けるかもしれないけどそっちの確認はまた今度。