我正在使用Jetpack Compose创建一个布局,并且有一列。我希望中间一个可组合,另一个与底部对齐。这是我的目标屏幕的图像
我花了一天时间解决这个问题,SpaceAround
和 SpaceBetween
没有帮助。我将不胜感激任何帮助。
使用具有 weight(1f)
和 verticalArrangement = Arrangement.Center
的列来包装第一个项目。这是代码
@Composable
fun Demo() {
Column(modifier = Modifier.fillMaxSize()) {
Column(
modifier = Modifier
.fillMaxWidth()
.weight(1f)
.background(color = Color.Transparent),
verticalArrangement = Arrangement.Center,
) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(100.dp)
.padding(15.dp)
.background(color = Color.Green)
)
}
Box(
modifier = Modifier
.fillMaxWidth()
.height(60.dp)
.background(color = Color.Yellow)
)
}
}
@Composable
@Preview
fun DemoPreview() {
Demo()
}
您可以使用自定义布局或类似内容:
Column(Modifier.fillMaxSize(),
verticalArrangement = Arrangement.SpaceBetween) {
Spacer(modifier = Modifier.fillMaxWidth().height(0.dp))
Box(
Modifier
.fillMaxWidth()
.height(60.dp)
.background(Red)
)
Row(
modifier = Modifier.fillMaxWidth().height(30.dp).background(Blue)
) {
//...
}
}