FlexBox 使用入门

本页介绍了如何实现基本 FlexBox 布局。

设置项目

1. 将 androidx.compose.foundation.layout 库添加到项目的 lib.versions.toml 中。

   [versions]
   compose = "1.13.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

示例 2：FlexBox 将五个内容项换行到两行，并以不相等的方式展开它们，以填充每行上的可用空间。各项内容之间在垂直和水平方向上都有 8.dp 的间距。

FlexBox(
    config = {
        wrap(FlexWrap.Wrap)
        gap(8.dp)
    }
) {
    // All boxes have an intrinsic width of 100.dp
    // Some grow to fill any remaining space on the row.
    RedRoundedBox()
    BlueRoundedBox()
    GreenRoundedBox(modifier = Modifier.flex { grow(1.0f) })
    OrangeRoundedBox(modifier = Modifier.flex { grow(1.0f) })
    PinkRoundedBox(modifier = Modifier.flex { grow(1.0f) })
}
FlexBoxSnippets.kt

如需详细了解 FlexBox 行为，请参阅设置容器行为和设置项行为。