设置商品行为

使用 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
 使用 basis Auto 根据商品的固有尺寸调整商品大小。

固定 dp

以 dp 为单位的固定大小。

 
FlexBox {
    RedRoundedBox(
        Modifier.flex { basis(200.dp) }
    )
    BlueRoundedBox(
        Modifier.flex { basis(100.dp) }
    )
}
FlexBoxSnippets.kt
 使用 basis 将商品的大小调整为固定的 dp 值。

百分比

容器大小的百分比。

 
FlexBox {
    RedRoundedBox(
        Modifier.flex { basis(0.7f) }
    )
    BlueRoundedBox(
        Modifier.flex { basis(0.3f) }
    )
}
FlexBoxSnippets.kt
 使用 basis 将商品尺寸设置为容器尺寸的百分比。

如果基准值小于项的固有最小大小，则改用固有最小大小。例如，如果包含一个字的 Text 项需要 50dp 才能显示，但也有 basis = 10.dp，则使用 50dp 的值。

在有空间时增大项

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

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

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

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

每个子项的基准值均为 100dp。有 300dp 的额外空间。

增长前，一个 600dp 的容器中包含 3 个基准为 100dp 的项。

子项 1 增大 300dp 以填充额外空间。

第一个商品会增长以填充 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 的额外空间。

三个基准大小均为 100dp 的商品，位于 600dp 的容器中，增长前具有不同的增长值。

总 grow 值为 6。

子项 1 增大 (1 / 6) * 300 = 50dp

子项 2 增大 (2 / 6) * 300 = 100dp

子项 3 增大 (3 / 6) * 300 = 150dp

商品会根据相对增长值增长，以填充 300dp 的额外空间。

在空间不足时缩小项

使用 shrink 指定当 FlexBox 容器没有足够的空间容纳所有项时，项缩小多少。shrink 的工作方式与 grow 相同，不同之处在于，它不是向项分配 额外空间，而是向项分配 空间不足 。shrink 值指定项接收多少空间不足，或者说，项将缩小多少。默认情况下，项的 shrink 值为 1f，这意味着它们会同等缩小。

以下示例展示了两个具有相同文本的 Text 可组合项。第一个子项的 shrink 值为 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

 700dp 容器中的两项内容。

500dp

 当容器大小减小到 500dp 时，第一个项会缩小。

450dp

 当容器大小减小到 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

五个大小各异的子元素，用于替换 alignItems 属性。

项顺序

默认情况下，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

两个圆角框，第一个包含文本“Hello”，第二个包含文本“World”。

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