JetpackComposeでFlexboxみたいなUIを作る

JetpackComposeでFlexboxみたいなUIの作成方法です。

Flowレイアウトについてはこちらを参照

FlowRowにViewを入れていくと自動的に折り返します。

FlowRowSample.kt

@OptIn(ExperimentalLayoutApi::class)
@Composable
fun FlowRowSample() {
    val items = listOf("Arctic Fox", "Bumblebee", "Chipmunk", "Dolphin","Electric Eel", "Flamingo", "Hedgehog", "Koala", "Meerkat")

    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        FlowRow(
            horizontalArrangement = Arrangement.Center
        ) {
            items.forEach {
                AssistChip(
                    onClick = {},
                    label = { Text(it) }
                )
            }
        }
    }
}

実行結果

簡単に実装できそうですね。

以上になります。