设置商品行为

使用 Modifier.flex 可控制项在 FlexBox 内的大小、顺序和对齐方式。

商品尺寸

使用 basis、grow 和 shrink 函数控制项的大小。

FlexBox {
    RedRoundedBox(
        modifier = Modifier.flex {
            basis(FlexBasis.Auto)
            grow(1.0f)
            shrink(0.5f)
        }
    )
}
FlexBoxSnippets.kt

设置初始大小

使用 basis 指定在分配任何额外空间之前项的初始大小。您可以将其视为内容的首选大小。

值类型	行为	代码段 注意：盒子的最大固有尺寸为 100dp	使用容器宽度 600dp 的示例
Auto （默认）	使用项的最大固有尺寸。 例如，Text 可组合项的最大固有宽度是其所有文本在单行中（不换行）的宽度。	FlexBox { RedRoundedBox( Modifier.flex { basis(FlexBasis.Auto) } ) BlueRoundedBox( Modifier.flex { basis(FlexBasis.Auto) } ) } FlexBoxSnippets.kt
修复了 dp	以 Dp 为单位的固定大小。	FlexBox { RedRoundedBox( Modifier.flex { basis(200.dp) } ) BlueRoundedBox( Modifier.flex { basis(100.dp) } ) } FlexBoxSnippets.kt
百分比	容器大小的百分比。	FlexBox { RedRoundedBox( Modifier.flex { basis(0.7f) } ) BlueRoundedBox( Modifier.flex { basis(0.3f) } ) } FlexBoxSnippets.kt

如果基准值小于项的固有最小尺寸，则系统会改用固有最小尺寸。例如，如果包含某个字词的 Text 项需要 50dp 才能显示，但同时也具有 basis = 10.dp，则会使用 50dp 值。

当有空间时，放大元素

使用 grow 指定当有额外空间时，项会放大多少。这是将所有项的 basis 值相加后，FlexBox 容器中剩余的空间。grow 值表示给定子元素相对于其同级元素将获得多少额外空间。默认情况下，项不会放大。

以下示例展示了包含三个子项的 FlexBox。每个基准值均为 100dp。第一个子项具有正 grow 值。由于只有一个子项具有 grow 值，因此实际值无关紧要 - 只要该值为正数，子项就会获得所有额外空间。

这些图片展示了当容器大小为 600dp 时 FlexBox 的行为。

FlexBox { RedRoundedBox( title = "400dp", modifier = Modifier.flex { grow(1f) } ) BlueRoundedBox(title = "100dp") GreenRoundedBox(title = "100dp") } FlexBoxSnippets.kt

每个子项的基准值均为 100dp。有 300dp 的额外空间。 子级 1 增长 300dp，以填充额外空间。

在以下示例中，容器尺寸和 basis 尺寸相同。不同之处在于，每个子项都有不同的 grow 值。

FlexBox { RedRoundedBox( title = "150dp", modifier = Modifier.flex { grow(1f) } ) BlueRoundedBox( title = "200dp", modifier = Modifier.flex { grow(2f) } ) GreenRoundedBox( title = "250dp", modifier = Modifier.flex { grow(3f) } ) } FlexBoxSnippets.kt

每个子项的基准值均为 100dp。有 300dp 的额外空间。 总放大值为 6。 子级 1 增长 (1 / 6) * 300 = 50dp 子级 2 增长 (2 / 6) * 300 = 100dp 子级 3 增长 (3 / 6) * 300 = 150dp

当空间不足时，缩小元素

使用 shrink 指定当 FlexBox 容器没有足够空间容纳所有项时，项的缩减程度。shrink 的工作方式与 grow 相同，只是它会将空间不足分配给各项，而不是将额外空间分配给各项。shrink 值指定了该项会分担多少空间不足，或者说该项会缩小多少。默认情况下，项的 shrink 值为 1f，这意味着它们会等比例缩小。

以下示例展示了两个具有相同文本的 Text 可组合项。第一个子项的收缩值为 1f，这意味着它会收缩以吸收所有空间不足。

FlexBox {
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelRed)
            .flex { shrink(1f) }
    )
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelBlue)
            .flex { shrink(0f) }
    )
}
FlexBoxSnippets.kt

随着容器尺寸缩小，子元素 1 也会缩小。

容器大小	FlexBox 界面
700dp
500dp
450dp

内容对齐

使用 alignSelf 控制项在交叉轴上的对齐方式。这会覆盖此项的容器的 alignItems 属性。它具有所有相同的可能值，并添加了 Auto，后者会继承 FlexBox 容器的行为。

例如，此 FlexBox 的 alignItems 设置为 Start，并且有五个子项会替换交叉轴对齐方式。

FlexBox(
    config = {
        alignItems(FlexAlignItems.Start)
    }
) {
    RedRoundedBox()
    BlueRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Center) })
    GreenRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.End) })
    PinkRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Stretch) })
    OrangeRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Baseline) })
}
FlexBoxSnippets.kt

商品顺序

默认情况下，FlexBox 会按照项在代码中的声明顺序进行布局。使用 order 替换此行为。

order 的默认值为零，FlexBox 会根据此值按升序对项进行排序。具有相同 order 值的任何项都会按照其声明顺序进行布局。使用负值和正值 order 值可将项移至布局的开头或结尾，而无需更改其声明位置。

以下示例展示了两个子项。第一个具有默认 order 零，第二个具有 -1 的顺序。排序后，子级 1 会显示在子级 2 之后。

FlexBox {
    // Declared first, but will be placed after visually
    RedRoundedBox(
        title = "World"
    )

    // Declared second, but will be placed first visually
    BlueRoundedBox(
        title = "Hello",
        modifier = Modifier.flex {
            order(-1)
        }
    )
}
FlexBoxSnippets.kt