Jetpack Compose布局之Row/Column

————————————————
版权声明：本文为CSDN博主「Ping_xp」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u013710752/article/details/121659949

Jetpack Compose的布局组件。先从Column，Row，Box讲起
一：竖直布局 Column
1.基本使用
Column() {
   Text(text = "千里之行")
   Text(text = "始于足下")
}
2.大小调整

可以使用modifier来设置Column的大小：
Column(modifier = Modifier
   .height(200.dp)
   .width(200.dp)) {
   Text(text = "千里之行")
   Text(text = "始于足下")
}

代码使用Modifier.fillMaxHeight().fillMaxWidth()来设置Column的大小，
此时Column将填充父控件的剩余大小，类似于match_parent 。
可以直接使用Modifier.fillMaxSize()来直接设置
Column(
   modifier = Modifier.fillMaxHeight().fillMaxWidth()
) {
   Text(text = "千里之行")
   Text(text = "始于足下")
}

内容高度按比例分配
可以使用Modifier.weight(1f)来设置内容高度的比例，Modifier.weight()只在Column和Row里面存在
Column(
   modifier = Modifier.fillMaxSize()
) {
   Text(text = "千里之行",Modifier.weight(1f))
   Text(text = "始于足下",Modifier.weight(1f))
}

3.verticalArrangement//(horizontalArrangement参数可以设置Row垂直排列的方式：)

verticalArrangement参数可以设置Column垂直排列的方式：
Column(
   modifier = Modifier.fillMaxHeight().fillMaxWidth(),
   verticalArrangement = Arrangement.Center
) {
   Text(text = "千里之行")
   Text(text = "始于足下")
}
上面的代码中Column里面的内容将垂直居中，Arrangement的值和对应效果如下：
Arrangement.EqualWeight 内容撑满Column的高度，每个组件的高度平分Column的高度
Arrangement.SpaceBetween 内容撑满Column的高度，最上方和最下方的组件紧靠Column，组件与组件之间的间距会平分剩余高度
Arrangement.SpaceAround 内容撑满Column的高度，最上方和最下方的组件与Column的间距是组件与组件直接的间距的一半
Arrangement.SpaceEvenly 内容撑满Column的高度，组件与组件之间的间距会平分剩余高度
Arrangement.Top 内容对齐到Column的最上方
Arrangement.Center 内容居中对齐
Arrangement.Bottom 内容对齐到Column的最下方

4.horizontalAlignment//(verticalAlignment参数可以设置Row的水平对齐方式：)

horizontalAlignment参数可以设置Column的水平对齐方式：
Column(
   modifier = Modifier.fillMaxHeight().fillMaxWidth(),
   verticalArrangement = Arrangement.Center,//设置垂直居中对齐
   horizontalAlignment =  Alignment.CenterHorizontally//设置水平居中对齐
) {
   Text(text = "千里之行")
   Text(text = "始于足下")
}
上面的代码中Column里面的内容将垂直水平都居中，horizontalAlignment的值有三种：

Alignment.Start 向内容开始的方向对齐，一般为左边
Alignment.CenterHorizontally 内容居中对齐
Alignment.End 向内容结束的方向对齐，一般为右边

5.内容单独设置排列方式
  Column(
       modifier = Modifier.fillMaxHeight().fillMaxWidth(),
       verticalArrangement = Arrangement.Center,//设置垂直居中对齐
       horizontalAlignment =  Alignment.CenterHorizontally//设置水平居中对齐
   ) {
       Text(text = "千里之行",Modifier.align(Alignment.Start))
       Text(text = "始于足下")
   }
可以使用Modifier.align(Alignment.Start)来单独设置Column里面某个组件水平的对齐方式，
Modifier.align()会优先horizontalAlignment指定的对齐方式。

6.background
背景色的设置使用的是modifier，使用Modifier.background来设置：
Column(
   modifier = Modifier
       .fillMaxHeight()
       .fillMaxWidth()
       .background(Color.Red),//设置背景设置为Red
   verticalArrangement = Arrangement.Center,
   horizontalAlignment = Alignment.CenterHorizontally
) {
   Text(text = "千里之行")
   Text(text = "始于足下")
}

7.border
边框的设置同样使用的是modifier，使用Modifier._border_来设置：
Column(
   modifier = Modifier
       .fillMaxHeight()
       .fillMaxWidth()
       .background(Color.Red)
       //设置边框的宽度为10dp,颜色为Yellow,设置圆角为20dp
       .border(10.dp, Color.Yellow, RoundedCornerShape(20.dp)),
   verticalArrangement = Arrangement.Center,
   horizontalAlignment = Alignment.CenterHorizontally
) {
   Text(text = "千里之行")
   Text(text = "始于足下")
}
注：使用RoundedCornerShape(topStart,topEnd,bottomEnd,bottomStart)
可以分别设置四个角的圆角角度；

8.clickable
使用Modifier.clickable()可以设置点击事件：

Column(
   modifier = Modifier
       .width(200.dp)
       .height(200.dp)
       .clickable {//设置点击事件
           Log.i(TAG_Column, "千里之行，始于足下")
       },
   verticalArrangement = Arrangement.Center,
   horizontalAlignment = Alignment.CenterHorizontally
) {
   Text(text = "千里之行")
   Text(text = "始于足下")
}

9.padding
使用Modifier.padding()可以设置Column的内边距，Compose没有设置外边距的参数：
Column(
   modifier = Modifier
       .width(200.dp)
       .height(200.dp)
       .clip(RoundedCornerShape(30.dp))
       .background(Color.Yellow)
       .padding(50.dp)
       .clickable {
           Log.i(TAG_Column, "千里之行，始于足下")
       },

   verticalArrangement = Arrangement.Center,
   horizontalAlignment = Alignment.CenterHorizontally
) {
   Text(text = "千里之行")
   Text(text = "始于足下")
}
padding可以设置所有边距，也可以设置每个位置的边距。
注意：如果padding在clickable前面，那么内边距的位置是不可以点击，
如果在clickable后面，那么内边距的位置也会响应点击事件，所以modifier是有顺序。

10.verticalScroll
使用Modifier.verticalScroll()可以使Column可以滚动：
Column(
   modifier = Modifier
       .width(200.dp)
       .height(200.dp)
       .clip(RoundedCornerShape(30.dp))
       .background(Color.Yellow)
       .padding(50.dp)
       .verticalScroll(ScrollState(0)),
   verticalArrangement = Arrangement.Center,
   horizontalAlignment = Alignment.CenterHorizontally
) {
   Text(text = "千里之行")
   Text(text = "始于足下")
   Text(text = "千里之行")
   Text(text = "始于足下")
   Text(text = "千里之行")
   Text(text = "始于足下")
   Text(text = "千里之行")
   Text(text = "始于足下")
}

verticalScroll接收一个ScrollState，创建ScrollState需要设置一个initial，就是初始位置，如果设置成 100 ，那么Column初始显示的时候，会滚动到 100 的位置；
Compose给我提供了一个专门用来显示可滚动Column的View：LazyColumn，可用用它来实现类似ListView和RecyclerView的功能。