一、线性布局
1、Column
Column 是一个垂直的线性布局组件,它的子项从上到下按照顺序垂直排列。
下面代码演示了使用 Column 组件的 verticalArrangement 和 horizontalAlignment 参数来使子项垂直水平居中。
Column(
modifier = Modifier
.padding(10.dp)
.background(Color.White)
.size(200.dp)
.border(width = 1.dp, Color.Black),
// 必须指定高度
verticalArrangement = Arrangement.Center,
// 必须指定宽度
horizontalAlignment = Alignment.CenterHorizontally
) {
Text("Hello Jetpack Compose", color = Color.Blue)
Text("Android", color = Color.Red)
}
Arrangement 参数展示:
2、Row
Row 是一个水平的线性布局组件,它的子项从左到右按照顺序水平排列。
下面代码演示了使用 Row 组件的 horizontalArrangement 参数来配置按钮的水平位置。
Column(
modifier = Modifier.fillMaxSize().padding(10.dp)
) {
// Equal Weight
Row(
modifier = Modifier.fillMaxWidth()
) {
Button(onClick = {}, Modifier.weight(1f)) {
Text("A")
}
Button(onClick = {}, Modifier.weight(1f)) {
Text("B")
}
Button(onClick = {}, Modifier.weight(1f)) {
Text("C")
}
}
// Space Between
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween
) {
Button(onClick = {}) {
Text("A")
}
Button(onClick = {}) {
Text("B")
}
Button(onClick = {}) {
Text("C")
}
}
// Space Around
Row(
···,
horizontalArrangement = Arrangement.SpaceAround
) { ··· }
// Space Evenly
Row(
···,
horizontalArrangement = Arrangement.SpaceEvenly
) { ··· }
// End
Row(
···,
horizontalArrangement = Arrangement.End
) { ··· }
// Center
Row(
···,
horizontalArrangement = Arrangement.Center
) { ··· }
// Start
Row(
···,
horizontalArrangement = Arrangement.Start
) { ··· }
}
二、帧布局
1、Box
Box 组件能将子项依照顺序依次堆叠,类似于传统视图中的 FrameLayout。
代码如下所示:
Box(Modifier.size(180.dp).background(Color.Red)) {
Box(Modifier.size(100.dp).background(Color.Yellow)) {
Box(Modifier.size(60.dp).background(Color.Green)) {
}
}
}
2、Surface
Surface 是 Box 组件的一个封装,同时提供了很多样式的设置,它减少了 Modifier 的使用量。
代码如下所示:
Surface(
shape = RoundedCornerShape(8.dp),
elevation = 8.dp,
modifier = Modifier.size(160.dp),
contentColor = Color.Red
) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text("Hello Surface")
}
}