内容
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的一个问题就是，公司根本不用，嘿嘿。
