————————————————
版權聲明：本文為CSDN博主「Ping_xp」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權協(xié)議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/u013710752/article/details/121659949

Jetpack Compose的布局組件。先從Column，Row，Box講起
一：豎直布局 Column
1.基本使用
Column() {
? ?Text(text = "千里之行")
? ?Text(text = "始于足下")
}
2.大小調(diào)整

可以使用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 = "始于足下")
}

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

3.verticalArrangement//(horizontalArrangement參數(shù)可以設置Row垂直排列的方式：)

verticalArrangement參數(shù)可以設置Column垂直排列的方式：
Column(
? ?modifier = Modifier.fillMaxHeight().fillMaxWidth(),
? ?verticalArrangement = Arrangement.Center
) {
? ?Text(text = "千里之行")
? ?Text(text = "始于足下")
}
上面的代碼中Column里面的內(nèi)容將垂直居中，Arrangement的值和對應效果如下：
Arrangement.EqualWeight 內(nèi)容撐滿Column的高度，每個組件的高度平分Column的高度
Arrangement.SpaceBetween 內(nèi)容撐滿Column的高度，最上方和最下方的組件緊靠Column，組件與組件之間的間距會平分剩余高度
Arrangement.SpaceAround 內(nèi)容撐滿Column的高度，最上方和最下方的組件與Column的間距是組件與組件直接的間距的一半
Arrangement.SpaceEvenly 內(nèi)容撐滿Column的高度，組件與組件之間的間距會平分剩余高度
Arrangement.Top 內(nèi)容對齊到Column的最上方
Arrangement.Center 內(nèi)容居中對齊
Arrangement.Bottom 內(nèi)容對齊到Column的最下方

4.horizontalAlignment//(verticalAlignment參數(shù)可以設置Row的水平對齊方式：)

horizontalAlignment參數(shù)可以設置Column的水平對齊方式：
Column(
? ?modifier = Modifier.fillMaxHeight().fillMaxWidth(),
? ?verticalArrangement = Arrangement.Center,//設置垂直居中對齊
? ?horizontalAlignment = ?Alignment.CenterHorizontally//設置水平居中對齊
) {
? ?Text(text = "千里之行")
? ?Text(text = "始于足下")
}
上面的代碼中Column里面的內(nèi)容將垂直水平都居中，horizontalAlignment的值有三種：

Alignment.Start 向內(nèi)容開始的方向?qū)R，一般為左邊
Alignment.CenterHorizontally 內(nèi)容居中對齊
Alignment.End 向內(nèi)容結束的方向?qū)R，一般為右邊

5.內(nèi)容單獨設置排列方式
? 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()會優(yōu)先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的內(nèi)邊距，Compose沒有設置外邊距的參數(shù)：
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前面，那么內(nèi)邊距的位置是不可以點擊，
如果在clickable后面，那么內(nèi)邊距的位置也會響應點擊事件，所以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，創(chuàng)建ScrollState需要設置一個initial，就是初始位置，如果設置成 100 ，那么Column初始顯示的時候，會滾動到 100 的位置；
Compose給我提供了一個專門用來顯示可滾動Column的View：LazyColumn，可用用它來實現(xiàn)類似ListView和RecyclerView的功能。