android - Android Jetpack Compose 中 LinearLayout 的替代品是什么？

Question

我可以用什么代替 LinearLayout在 Android Jetpack Compose 中？如果有一个示例说明如何用新的 API 替换常见的 LinearLayout 功能，那就太好了。

Answer 1

LinearLayout对应Row和 Column Compose 中的可组合项。

如果您要显示大量项目，请查看 LazyRow和 LazyColumn仅显示可见项目，如 RecyclerView可以，但您可以像使用 Row 和 Column 一样简单地使用它们。参见 What is the Jetpack Compose equivalent of RecyclerView or ListView?举个例子。

让我们将 LinearLayout API 与行和列进行比较:

---

android:orientation (线性布局)
正如您可能猜到的那样 <LinearLayout android:orientation="vertical" ...>相当于Column {}和 <LinearLayout android:orientation="horizontal" ...>至 Row {}

---

android:gravity (线性布局)
有horizontalAlignment & verticalArrangement Column 的参数和 verticalAlignment & horizontalArrangement对于Row .例如:

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

相当于

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

---

android:layout_gravity (LinearLayout.LayoutParams)
参见行的 align和列的 align如果已设置，则修饰符会覆盖容器对齐方式。还有更高级的修饰符，如 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)
参见行的 weight和列的 weight修饰符。例如

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