设置商品行为

使用 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 指定当有额外空间时，项的增长量。这是 FlexBox 容器中在所有商品的 basis 值相加后剩余的空间。grow 值表示与同级元素相比，指定子元素将获得多少额外空间。默认情况下，商品不会增长。

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

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

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

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

在增长之前，一个 600dp 的容器中有三个基准为 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 的容器中，增长前，具有不同的增长值。

总增长值为 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 可组合函数。第一个子元素的收缩值为 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，并且有 5 个子项会替换交叉轴对齐方式。

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。排序后，Child 1 显示在 Child 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”。

上一页
设置容器行为
下一页
了解可折叠设备