FlexBox を使ってみる

このページでは、基本的な FlexBox レイアウトを実装する方法について説明します。

プロジェクトのセットアップ

1. プロジェクトの lib.versions.toml に androidx.compose.foundation.layout ライブラリを追加します。

   [versions]
   compose = "1.11.0-alpha06"
   
   [libraries]
   androidx-compose-foundation-layout = { group = "androidx.compose.foundation", name = "foundation-layout", version.ref = "compose" }
   

2. アプリの build.gradle.kts にライブラリ依存関係を追加します。

   dependencies {
       implementation(libs.androidx.compose.foundation.layout)
   }
   

基本的な FlexBox レイアウトを作成する

例 1: FlexBox は、中央揃えの 2 つの Text 要素をレイアウトします。

FlexBox(
    config = {
        direction = FlexDirection.Column
        alignItems = FlexAlignItems.Center
    }
) {
    Text(text = "Hello", fontSize = 48.sp)
    Text(text = "World!", fontSize = 48.sp)
}
FlexBoxSnippets.kt

例 2: FlexBox は 5 つのアイテムを 2 行に折り返し、各行の利用可能なスペースを埋めるように不均等に拡大します。アイテムの間には、縦方向と横方向の両方に 8.dp のギャップがあります。

FlexBox(
    config = {
        wrap = FlexWrap.Wrap
        gap(8.dp)
    }
) {
    RedRoundedBox()
    BlueRoundedBox()
    GreenRoundedBox(modifier = Modifier.width(350.dp).flex { grow = 1.0f })
    OrangeRoundedBox(modifier = Modifier.width(200.dp).flex { grow = 0.7f })
    PinkRoundedBox(modifier = Modifier.width(200.dp).flex { grow = 0.3f })
}
FlexBoxSnippets.kt

FlexBox の動作について詳しくは、コンテナの動作を設定するとアイテムの動作を設定するをご覧ください。