Row
Row的排列方式如下。
Row的對齊都是控制Child子元件。
在英文文件，會提到Main axis主軸，也就是Row的排列方式是由左至右水平排列。
主軸，控制空格與位置，主軸的參數是Arrangement。
Cross-axis 交叉軸，就是跟Main axis主軸相反，就是垂直位置，垂直位置有:靠上Top、垂直置中CenterVertically、靠下Bottom。
交叉軸，控制位置，交叉軸的參數是，Alignment。
垂直位置
verticalAlignment 設定「子元件」(Child) 垂直對齊方式，不是設定本身元件垂直對齊。
子元件垂直對齊方式 = 靠上對齊
1
2
3
4
5
6
7
8
9
10
11
12
13
@Composable
fun testRow() {
Row(
modifier = Modifier
.fillMaxWidth()
.height(200.dp),
verticalAlignment = Alignment.Top
) {
Text("Item 1")
Text("Item 2")
Text("Item 3")
}
}
子元件垂直對齊方式 = 靠上對齊
1
2
3
4
5
6
7
8
9
10
11
12
13
@Composable
fun testRow() {
Row(
modifier = Modifier
.fillMaxWidth()
.height(200.dp),
verticalAlignment = Alignment.CenterVertically
) {
Text("Item 1")
Text("Item 2")
Text("Item 3")
}
}
子元件垂直對齊方式 = 置底
1
2
3
4
5
6
7
8
9
10
11
12
13
@Composable
fun testRow() {
Row(
modifier = Modifier
.fillMaxWidth()
.height(200.dp),
verticalAlignment = Alignment.Bottom
) {
Text("Item 1")
Text("Item 2")
Text("Item 3")
}
}
水平位置
horizontalArrangement設定「子元件」(Child) 水平對齊方式。
參數是Arrangement，不是Alignment。
預設水平排列方式是靠左。
1
2
3
4
5
6
7
8
9
10
11
12
13
@Composable
fun testRow() {
Row(
modifier = Modifier
.fillMaxWidth()
.height(200.dp),
horizontalArrangement = Arrangement.Start
) {
Text("Item 1")
Text("Item 2")
Text("Item 3")
}
}
水平排列方式是置中。
horizontalArrangement = Arrangement.Center
水平排列方式是靠右。
horizontalArrangement = Arrangement.End
SpaceBetween，水平排列方式是均勻分散，左右二邊沒空格。
horizontalArrangement = Arrangement.SpaceBetween
SpaceEvenly，水平排列方式是均勻分散，左右有空格。
horizontalArrangement = Arrangement.SpaceEvenly
SpaceAround，水平排列方式是元素周圍間距相等，item1與item2，item2與item3，二個間距是相同。
··[item1]···[item2]···[item3]··
item1與item2是3個空格。
item2與item3是3個空格。
horizontalArrangement = Arrangement.SpaceAround
水平排列方式比較:
Start: [A][B][C]·········
Center: ····[A][B][C]·····
End: ········[A][B][C]
SpaceBetween: [A]····[B]····[C]
SpaceEvenly: ·[A]····[B]····[C]·
SpaceAround: ··[A]···[B]···[C]··
以下是舊文章
1
2
3
4
5
6
7
8
9
10
11
12
Row(
modifier = Modifier
.size(200.dp)
.background(Color.Green)
){
Text(
"Column First Item",
modifier = Modifier.weight(1f, true)
)
Text("Column Second Item",
modifier = Modifier.weight(1f, true))
}
