0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

概要

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))
}

参考

Compose レイアウトの基本

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?