開始使用 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

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

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