喷气背包组合列可组合对齐

Question

我正在使用Jetpack Compose创建一个布局，并且有一列。我希望中间一个可组合，另一个与底部对齐。这是我的目标屏幕的图像

我花了一天时间解决这个问题，SpaceAround 和 SpaceBetween 没有帮助。我将不胜感激任何帮助。

Answer 1

您可以使用自定义布局或类似内容：

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)
    ) {
        //...
    }
}

Answer 2

使用具有 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()
}