七爪源码：面向视图开发人员的 Jetpack Compose—LinearLayout

大家好，欢迎来到IT知识分享网。

在 Views 中，LinearLayout 用于线性布局视图 — 水平或垂直。 那么在compose中LinearLayout的等价物是什么？

基本上在 Jetpack Compose 中，我们使用行/列组合来实现相同的结果。 那么让我们开始吧……

提示：如果你赶时间，你可以看看代码片段和图片，你就会明白整个事情……

1. 安卓：方向

在 LinearLayout 中，您可以使用 android:orientation=”horizontal|vertical” 属性来定义其子项的方向，在 Compose 中，我们使用 android:orientation=”horizontal” 的 Row 和 android:orientation=”vertical” 的 Column 组成 达到相同的结果。

这是代码…

@Composable fun TheAwesomeColumn() { Column(modifier = Modifier.padding(16.dp)) { RedBox() Spacer(modifier = Modifier.height(16.dp)) OrangeBox() Spacer(modifier = Modifier.height(16.dp)) GreenBox() } }

而对于行…

@Composable fun TheCuteRow() { Row(Modifier.padding(16.dp)) { RedBox() Spacer(modifier = Modifier.width(16.dp)) OrangeBox() Spacer(modifier = Modifier.width(16.dp)) GreenBox() } }

结果…

2.安卓：重力

指定对象应如何定位其内容 android:gravity=”end|center|…” 在 compose 中，我们可以在这里使用 Column 的 HorizontalAlignment 和 VerticalArrangement 参数以及 Row 的 verticalAlignment 和 HorizontalArrangement 参数。

Column( verticalArrangement = Arrangement.Bottom, horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.fillMaxSize() )

注意：您可以使用Modifier.fillMaxSize() 设置任何组合高度和宽度match_parent，或者您可以使用fillMaxHeight() 仅设置高度，使用fillMaxWidth() 设置宽度。

Row( horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically, modifier = Modifier.fillMaxSize() )

结果…。

您还可以使用horizontalAlignment 并顺便说一下行与列相同，但您现在是水平的:)。

3. android:layout_gravity

如果你想让一个子级覆盖它的父级重力，你可以使用 Row 的 align 和 Column 的 align 修饰符来完成这项工作。 例如：

Column( modifier = Modifier.padding(16.dp).fillMaxSize(), horizontalAlignment = Alignment.Start ) { RedBox() // this will be like parent Alignment.Start Spacer(modifier = Modifier.height(16.dp)) //this will override it's parent to CenterHorizontally OrangeBox(Modifier.align(Alignment.CenterHorizontally)) Spacer(modifier = Modifier.height(16.dp)) GreenBox() }

4. 安卓：重量

为了创建一个布局，其中每个孩子使用相同数量的空间或在屏幕上按特定比例划分空间，我们将属性设置为行的填充宽度和列的高度。 例如：

Row( modifier = Modifier .padding(16.dp) .fillMaxWidth() ) { Text(text = "Cash", modifier = Modifier.weight(1f).background(Color.Cyan)) Spacer(modifier = Modifier.width(16.dp)) Text(text = "Credit Card", modifier = Modifier.weight(1f).background(Color.Blue)) }

我知道，用户界面看起来很糟糕，但你明白了……

注意：您可以给它任何您想要为 ex 创建动态布局的比例：一个为 2f，另一个为 1f。

另一个注意事项：Wight 函数具有填充参数 weight(…, fill = true) ，

fill = true 是默认值，它在可用空间中的作用类似于 match_parent

fill = false 将像可用空间中的 wrap_content 一样。

5. 展开一个孩子

如果您想让孩子填满所有可用空间怎么办？ 例如：

这是你如何做到的……

Row( verticalAlignment = Alignment.CenterVertically, modifier = Modifier.fillMaxWidth() ) { LeftChild(...) Spacer(...) // The expanded child goes here MiddleChild( modifier = Modifier .weight(1f) // here is the magic .wrapContentWidth(Alignment.Start), // here is the magic ) Spacer(...) RightChild(...) }

在这里 MiddleChild 将占用所有可用空间并将 RightChild 推到边缘……

注意：您可以对列执行相同的操作。

最后给你一个小提示：默认情况下，行/列不可滚动，但我们可以通过添加修饰符轻松使它们可滚动……

Row(modifier = Modifier.horizontalScroll(rememberScrollState()))
/Column(modifier = Modifier.verticalScroll(rememberScrollState()))