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

在 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()))