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 行为，请参阅 设置容器行为 和 设置 项行为。

上一页
概览
下一页
设置容器行为