设置商品行为

使用 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 值为正数，因此实际值无关紧要 - 只要是正数，子项就会获得所有额外的空间。

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

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 的容器中，增长前具有不同的增长值。

总增长值为 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”。

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