一、布局
布局居中
modifier = Modifier
.fillMaxSize()
.wrapContentSize(Alignment.Center)
1、ROW的垂直居中和水平居中
Row(
modifier = Modifier.fillMaxHeight().fillMaxWidth(),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically // 垂直居中
) {
// Your content here
}
2、Row其中一个子控件居右
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.End
) {
Text("Left content")
Text("Right content", modifier = Modifier.weight(1f).align(Alignment.End))
}
在这个示例中,Text("Right content")
会被设置为居右显示。Modifier.weight(1f)
将该子控件设置为占据剩余空间的权重,而Modifier.align(Alignment.End)
将其对齐方式设置为居右。
3、Column子控件水平居中
Column(
modifier = Modifier
.fillMaxWidth()
.wrapContentWidth(Alignment.CenterHorizontally),
) {
Image(
painter = painterResource(R.mipmap.head_portrait),
contentDescription = null,
)
}
二、Row有三个子控件占满宽度
代码
Row(Modifier.fillMaxWidth()) {
// 第一个子控件
Box(Modifier.weight(1f)) {
// 子控件内容
}
// 第二个子控件
Box(Modifier.weight(1f)) {
// 子控件内容
}
// 第三个子控件
Box(Modifier.weight(1f)) {
// 子控件内容
}
}
在这个示例中,Row
使用 Modifier.fillMaxWidth()
修饰符,使其占据可用的最大宽度。然后,每个子控件都使用 Modifier.weight(1f)
修饰符,以相等的权重占据 Row
的宽度。