android - Jetpack Compose 中列和行的 Expanded 和 LayoutSize.Expand 的区别

Question

我在 Android Studio Canary 1 上尝试了 Jetpack Compose，并Column在 ui 中添加了可组合。Column有一个名为的属性modifier，我们可以在其中传递不同的修饰符。我使用Expanded了修饰符，从而Column占用了所有可用空间。

此外，Column有mainAxisSize和crossAxisSize属性，所以我也尝试了它们并将其设置LayoutSize.Expand为旨在扩展我认为的给定轴。这也导致Column占用所有可用空间。看看下面的例子：

1. 使用 LayoutSize.Expand

Column(mainAxisSize = LayoutSize.Expand,
crossAxisSize = LayoutSize.Expand) {
    Text("Jetpack",modifier = ExpandedHeight)
    Text("Compose",modifier = ExpandedHeight)
}

输出：

2.使用扩展

Column(modifier = Expanded) {
    Text("Jetpack",modifier = ExpandedHeight)
    Text("Compose",modifier = ExpandedHeight)
}

输出：

观察结果是以下代码都提供了相同的输出。那么 和和Expanded和LayoutSize.Expand 有什么区别？ColumnRow

Answer 1

它们是实现同一目标的两种方法：

Expanded 修改器强制目标组件填充所有可用空间。它可以应用于任何接受修饰符的组合。

mainAxisSize 参数是一种设置布局大小的方法，是特定于 Row/Column 的参数。

您应该使用 Expanded 修饰符。mainAxisSize 参数已从Column中删除。

Answer 2

在jetpack compose 1.0上，看起来像flutter api的扩展修饰符不再可用但是你可以这样做。

Row {
    Box(modifier = 
      Modifier.weight(1f).wrapContentWidth(Alignment.Start)) {}
    Box() {}
}

在第一个可组合的 Box 中，布局被扩展。如果你熟悉 Flutter，它类似于 Flutter Flex 小部件。

您还可以在此处查看谷歌参考https://developer.android.com/jetpack/compose/layouts/intrinsic-measurements