開始使用 FlexBox

本頁說明如何實作基本的 FlexBox 版面配置。

設定專案

1. 將 androidx.compose.foundation.layout 程式庫新增至專案的 lib.versions.toml。

   [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 會排列兩個 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 將五個項目換行至兩列，並以不均等的方式擴展項目，填滿每列的可用空間。項目之間有垂直和水平的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 行為，請參閱「設定容器行為」和「設定項目行為」。