概要
ColumnやRowでの子コンポーネントを配置する際に最近気づいたことがあったので忘備録です。
子コンポーネント間のスペース設定方法
子コンポーネント間のスペースの取り方は主に2つです。
1. Arrangement.spacedBy()を使用
Arrangement.spaceBy()
で子コンポーネント間のスペースを一括で指定できます。
Column(
verticalArrangement = Arrangement.spacedBy(4.dp),
){
Box(modifier = Modifier.size(8.dp))
Box(modifier = Modifier.size(8.dp))
}
2. Spacerを使用
Spacer()
を使うことで個別に要素間のスペースを設定できます。
Column {
Box(modifier = Modifier.size(8.dp))
Spacer(Modifier.height(4.dp))
Box(modifier = Modifier.size(8.dp))
}
件付き表示での注意点とベストプラクティス
Column
内の要素が条件によってコンポーネントが表示されたり、非表示になったりするようなUIがよくあるかと思います。このとき、以下のような書き方を以前まではしていました。
Column {
val isShow = false
HideBox(isShow)
Box(modifier = Modifier.size(8.dp))
}
@Composable
fun HideBox(
isShow: Boolean,
) {
if (isShow) {
Box(modifier = Modifier.size(8.dp))
// 非表示になる要素内にSpacerを配置
Spacer(Modifier.height(4.dp))
}
}
Arrangement.spaceBy()
を使うと先頭にスペースが挿入されてしまうと勘違いしていたため、このような書き方をしていました。
しかし、このような場合でもspaceBy
を使えば非表示のコンポーネントは無視されて、表示されるコンポーネント間にだけスペースを挿入してくれます。
Column(
verticalArrangement = Arrangement.spacedBy(4.dp),
){
val isShow = false
HideBox(isShow)
Box(modifier = Modifier.size(8.dp))
}