Jetpack Compose 中列和行的扩展和 LayoutSize.Expand 之间的区别

Question

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

此外，Column 具有 mainAxisSize 和 crossAxisSize 属性，因此我也尝试了它们并将其设置为 LayoutSize.Expand，我认为这是为了扩展给定的轴。这也导致 Column 占用了所有可用的 space。查看下面的示例：

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)
}

输出：

Observation is that Both the following code provides the same output. Then what is the difference between Expanded and LayoutSize.Expand when it comes to Column and Row?

Answer 1

它们是实现同一件事的两种方法：

Expanded modifier 强制目标组件填充所有可用 space。它可以应用于任何接受修饰符的可组合项。

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

您应该使用扩展修饰符。 mainAxisSize 参数已从 Column.

中删除

Answer 2

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

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

在第一个 Box 可组合项中，布局已展开。如果你熟悉 flutter，它类似于 flutter Flex widget。

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

Jetpack Compose 中列和行的扩展和 LayoutSize.Expand 之间的区别

Difference Between Expanded and LayoutSize.Expand for Column and Row in Jetpack Compose

android

android-jetpack-compose

1。使用 LayoutSize.Expand

输出：

2。使用扩展

输出：