開始使用 FlexBox

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

設定專案

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

    [versions]
compose = "1.11.0-beta01"

[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

在基本 FlexBox 實作中，彼此堆疊的 Hello World 文字可組合函式。

範例 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 行為，請參閱「設定容器行為」和「設定項目行為」。

上一頁
總覽
下一頁
設定容器行為