为 'Column' 内的可组合项提供不同的对齐方式

Question

我在一个列中有一个 'Text' 和另一个可组合项。我想将文本放在顶部，将可组合项定义的布局放在底部。我无法找到一种方法来为 Column 中的 'elements' 提供不同的对齐方式，因为 Column 的 'Modifier' 中指定的 alignment/arrangement 适用于其中的所有 'elements' .我当前的代码都与底部对齐。这是我的代码：

@Composable
fun SignUpDetails(navController: NavController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Bottom,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "First Screen\n" +
                    "Click me to go to Second Screen",
            color = Color.Green,
            style = TextStyle(textAlign = TextAlign.Center),
            modifier = Modifier
                .padding(24.dp)
                .clickable(onClick = {
                    // this will navigate to second screen
                    navController.navigate("second_screen")
                })
        )
        ProgressBar1UI()
    }
}

如何实现我的要求？

Answer 1

您可以使用 verticalArrangement = Arrangement.SpaceBetween:

Place children such that they are spaced evenly across the main axis, without free space before the first child or after the last child

类似于：

Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.SpaceBetween
) {

        Text( /*...*/ )
        ProgressBar1UI()
}

否则你可以使用不同的东西，比如 Box 和 Modifier.align:

Box(modifier = Modifier.fillMaxSize()) {
    Text(
         modifier = Modifier
            .align(Alignment.TopCenter)
    )

    ProgressBar1UI(Modifier.align(Alignment.BottomCenter))

}

Answer 2

实现这种行为的另一种方法（一个视图在顶部，第二个视图在底部）是在项目之间添加带有权重修饰符的 Spacer 组件。

@Composable
fun Example() {
    Column {
        Text("FirstText")

        Spacer(modifier = Modifier.weight(1f))

        Text("SecondText")
    }
}

为 'Column' 内的可组合项提供不同的对齐方式

Provide different alignments to composables within 'Column'

android

vertical-alignment

android-jetpack-compose