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

Question

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

Answer 1

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

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

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

---

android：方向（线性布局）
正如您可能猜到的那样， <LinearLayout android:orientation="vertical"...>相当于Column {} ， <LinearLayout android:orientation="horizontal"...> "...> 相当于Row {}

---

android：重力（线性布局）
Column有 horizo horizontalAlignment和verticalArrangement horizontalArrangement ， Row有verticalAlignment和 horizontalArrangement。 例如：

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

相当于

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

---

android:layout_gravity (LinearLayout.LayoutParams)
请参阅行的对齐和列的对齐修饰符，它们会覆盖容器 alignment（如果已设置）。 还有更高级的修饰符，如 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))
}