Android Jetpack Compose 中 LinearLayout 的替代品是什么?

Question

我可以在Android Jetpack Compose中使用什么来代替LinearLayout？一个关于常见的LinearLayout功能如何被新的API取代的例子会很好。

Answer 1

LinearLayout 对应于 Compose 中的行和列可组合项。

如果您要显示大量项目，请查看LazyRow和LazyColumn，它们仅像RecyclerView那样显示可见项目，但您可以使用它们像行和列一样简单。请参阅什么是 Jetpack Compose 等同于 RecyclerView 或 ListView？举个例子。

让我们将 LinearLayout API 与 Row 和 Column 进行比较：

---

android：orientation(LinearLayout)
正如你可能猜到的那样<LinearLayout android:orientation="vertical" ...>相当于Column {}和<LinearLayout android:orientation="horizontal" ...>Row {}

---

android：gravity(LinearLayout)
Column 有horizontalAlignment&verticalArrangement参数，Row 有verticalAlignment&horizontalArrangement参数。例如：

<LinearLayout ...
android:orientation="vertical"
android:gravity="end|center">
...
</LinearLayout>

相当于

Column(
...
horizontalAlignment = Alignment.End,
verticalArrangement = Arrangement.Center
) { ... }

---

android：layout_gravity(LinearLayout.LayoutParams)
请参阅行的对齐和列的对齐修饰符，如果设置了容器对齐方式，则这些修饰符会覆盖容器对齐方式。还有更高级的修饰符，如 row 的 alignByBaseline，有关更多详细信息，请参阅文档。例如：

<LinearLayout ...
android:orientation="vertical"
android:gravity="end">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="first" />
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="start"
android:text="second" /> 
</LinearLayout>

等于

Column(
...
horizontalAlignment = Alignment.End,
) {
// this item is aligned to the end according to the column's alignment
Text("first")
// but this one is aligned to the start because it overrides the alignment
Text("second", modifier = Modifier.align(Alignment.Start))
}

---

android：layout_weight(LinearLayout.LayoutParams)
请参阅行的权重和列的权重修饰符。例如

<LinearLayout android:orientation="horizontal" ...>
<TextView
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:text="first" />
<TextView
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="2"
android:text="second" />
</LinearLayout>

等于

Row {
Text("first", modifier = Modifier.weight(1.0f))
Text("second", modifier = Modifier.weight(2.0f))
}