【Android】【Compose】Compose里面的Row和Column的简单使用

内容

Row和Column的简单使用方式和常用属性含义

Row

在 Jetpack Compose 中，Row 是一种用于在水平方向排列子元素的布局组件。它类似于传统 Android 中的 LinearLayout，但更加灵活和强大。

Row的代码

@Composable
inline fun Row(
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    content: @Composable RowScope.() -> Unit
) {
    val measurePolicy = rowMeasurePolicy(horizontalArrangement, verticalAlignment)
    Layout(
        content = { RowScopeInstance.content() },
        measurePolicy = measurePolicy,
        modifier = modifier
    )
}

Row 的属性和用法

基本用法：

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.CenterVertically
) {
    // 子元素
}

modifier：用于指定 Row 的大小、填充方式等属性的修饰符。
horizontalArrangement：水平排列方式，例如 Arrangement.SpaceBetween 表示子元素之间均匀分布。
verticalAlignment：垂直对齐方式，例如 Alignment.CenterVertically 表示子元素在垂直方向上居中对齐。

子元素：

在 Row 的大括号内添加子元素，可以是任何支持 Compose 的组件，如 Text、Image、Button 等。

属性：

modifier：

修饰符，可以控制 Row 的大小、填充等。

horizontalArrangement：

控制子元素在水平方向的排列方式，常见的有：

Arrangement.Start：从开始位置对齐（默认）。

Arrangement.End：末尾对齐。

Arrangement.Center：居中对齐。

Arrangement.SpaceEvenly：均匀分布。

Arrangement.SpaceAround：子元素周围均匀分布空间。

Arrangement.SpaceBetween：子元素之间均匀分布。

verticalAlignment：

控制子元素在垂直方向上的对齐方式，常见的有：

Alignment.Top：顶部对齐。

Alignment.Bottom：底部对齐。

Alignment.CenterVertically：垂直居中对齐。

Alignment.CenterVertically：垂直居中对齐。

Alignment.Bottom：底部对齐。

示例：

Row(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp),
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.CenterVertically
) {
    Text("Left Item")
    Spacer(modifier = Modifier.width(16.dp))
    Text("Right Item")
}

显示效果

这个示例中，两个 Text 组件会被放置在 Row 中，左边的文本会靠左对齐，右边的文本会靠右对齐，并且它们之间有一个 16dp 的空白间隔。

Column

在 Jetpack Compose 中，Column 是一种用于垂直排列子元素的布局组件，类似于传统 Android 中的 LinearLayout，但更为灵活和强大。

Column的代码

@Composable
inline fun Column(
    modifier: Modifier = Modifier,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    content: @Composable ColumnScope.() -> Unit
) {
    val measurePolicy = columnMeasurePolicy(verticalArrangement, horizontalAlignment)
    Layout(
        content = { ColumnScopeInstance.content() },
        measurePolicy = measurePolicy,
        modifier = modifier
    )
}

Column 的属性和用法

基本用法：

Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    // 子元素
}

modifier：用于指定 Column 的大小、填充方式等属性的修饰符。
verticalArrangement：垂直排列方式，例如 Arrangement.Center 表示子元素在垂直方向上居中排列。
horizontalAlignment：水平对齐方式，例如 Alignment.CenterHorizontally 表示子元素在水平方向上居中对齐。

子元素：

在 Column 的大括号内添加子元素，可以是任何支持 Compose 的组件，如 Text、Image、Button 等。

属性：

modifier：

修饰符，可以控制 Column 的大小、填充等。

verticalArrangement：

控制子元素在垂直方向上的排列方式，常见的有：

Arrangement.Top：顶部对齐。

Arrangement.Bottom：底部对齐。

Arrangement.Center：垂直居中对齐。

Arrangement.SpaceEvenly：均匀分布。

Arrangement.SpaceAround：子元素周围均匀分布空间。

Arrangement.SpaceBetween：子元素之间均匀分布。

horizontalAlignment：

控制子元素在水平方向上的对齐方式，常见的有：

Alignment.Start：开始位置对齐（默认）。

Alignment.End：末尾对齐。

Alignment.CenterHorizontally：水平居中对齐。

Alignment.CenterHorizontally：水平居中对齐。

示例：

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Top Item")
    Spacer(modifier = Modifier.height(16.dp))
    Text("Middle Item")
    Spacer(modifier = Modifier.height(16.dp))
    Text("Bottom Item")
}

显示效果

区别

Column：

垂直排列：Column 主要用于垂直方向上排列子元素。
默认排列方式：子元素从上到下依次排列。
属性：可以设置垂直对齐方式 (verticalArrangement)，控制子元素在垂直方向上的布局方式，例如居中、顶部对齐、底部对齐等。
示例应用：适合于垂直列表或者页面上垂直排列的 UI 元素。

Row：

水平排列：Row 主要用于水平方向上排列子元素。
默认排列方式：子元素从左到右依次排列。
属性：可以设置水平对齐方式 (horizontalArrangement)，控制子元素在水平方向上的布局方式，例如居中、左对齐、右对齐等。
示例应用：适合于水平列表或者页面上水平排列的 UI 元素。

共同点：

子元素：两者的子元素可以是任何支持 Compose 的 UI 组件，例如 Text、Image、Button 等。
修饰符：都支持使用 modifier 设置大小、填充和其他样式属性。
灵活性：都可以嵌套使用，例如在一个 Column 中放置一个或多个 Row，以实现复杂的布局结构。

和传统的 LinearLayout 对比

声明式 UI：

Compose：Jetpack Compose 是一种声明式 UI 框架，通过 Kotlin 代码描述 UI 的结构和行为，而不是像传统的 XML 布局文件。这种方式更加灵活，使得 UI 的构建和修改更加直观和便捷。
LinearLayout：LinearLayout 是 Android 原生布局系统中的一部分，通过 XML 文件描述 UI 结构和属性，具有一定的静态性，修改布局结构和属性相对复杂。

性能优化：

Compose：Jetpack Compose 提供了基于函数式响应式编程的 UI 更新机制，能够更高效地处理 UI 的重绘和局部更新，以确保性能的最大化。
LinearLayout：在传统的 Android 开发中，布局的重绘和更新机制可能相对复杂，需要开发者手动管理视图的状态和更新。

布局属性：

Compose：Column 和 Row 通过函数式 API 提供了更丰富和灵活的布局属性和修饰符，例如 modifier 和对齐方式的指定，使得布局更加可控和可定制。
LinearLayout：LinearLayout 通过 XML 的属性来控制子元素的排列方式和对齐方式，相对于 Compose 的代码方式来说，灵活性较低。

组合性和可重用性：

Compose：Compose 提倡组合和可重用性，可以通过自定义组件和组合多个小组件来构建复杂的 UI 结构，使得代码更具可维护性和可扩展性。
LinearLayout：传统的 LinearLayout 也支持布局的组合和嵌套，但相较于 Compose 的函数式组合方式来说，复用和灵活性有所限制。

Jetpack Compose 对于有传统 Android 开发经验的开发者来说可能确实会有一些不适应的感觉，但是感觉以后Compose应该是一种大势所趋吧，不学是不行的，慢慢来学习吧，Jetpack Compose 是一种全新的声明式 UI 框架，与传统的基于 XML 的布局系统截然不同。它采用了函数式编程的方式来描述 UI，这需要习惯于用代码而不是 XML 来构建和定义界面。

对于习惯了 XML 布局和 View 控制的人来说，这种范式转变可能需要一定的时间和适应过程。当初学习kotlin的时候也是这样，很不习惯这样的写法。感觉现在学习Compose的一个问题就是，公司根本不用，嘿嘿。