Jetpack Composeで要素間に余白を均等に置きたい

ちょっとバッドなコード

Jetpack Composeで要素間に余白を指定したいとき、こうしてないですか？？

SampleView.kt@Composable
fun SampleView() {
    Column(
        Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        GreenBox()

        Spacer(modifier = Modifier.height(20.dp)) // 要素間ごとにSpacerを置かないといけない...

        GreenBox()

        Spacer(modifier = Modifier.height(20.dp))

        GreenBox()
    }
}

@Composable
private fun GreenBox() {
    Box(
        modifier = Modifier
            .size(50.dp)
            .background(
                Color(android.graphics.Color.rgb(134, 179, 144))
            )
    )
}

これでも悪くはないですが、もっとスマートに書ける方法があります。

スタイリッシュなコード

SampleView.kt@Composable
fun SampleView() {
    Column(
        Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(
            space = 20.dp,
            alignment = Alignment.CenterVertically
        ), // 変更！！
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        GreenBox()

        GreenBox()

        GreenBox()
    }
}

@Composable
private fun GreenBox() {
    Box(
        modifier = Modifier
            .size(50.dp)
            .background(
                Color(android.graphics.Color.rgb(134, 179, 144))
            )
    )
}

先ほどのViewと変わりなく表示されていますね👏

---

この .spacedBy() メソッドを使用すれば、要素のAlignmentと、要素間の余白を均等に置くことができます。

(SwiftUIの VStack(alignment: .., space: ..) {...} と同じ感じの実装ができますね)