为“列”中的可组合项提供不同的对齐方式答案

【问题标题】：Provide different alignments to composables within 'Column'为“列”中的可组合项提供不同的对齐方式
【发布时间】：2021-07-11 13:43:01
【问题描述】：

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

@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()
    }
}

如何实现我的要求？

【问题讨论】：

你能补充一些细节吗？你想要像 Text ProgressBar1UI 这样的东西吗？

标签： android vertical-alignment android-jetpack-compose

【解决方案1】：

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

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

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

        Text("SecondText")
    }
}

【讨论】：

【解决方案2】：

您可以使用verticalArrangement = Arrangement.SpaceBetween:

放置孩子，使它们在主轴上均匀分布，在第一个孩子之前或最后一个孩子之后没有空闲空间

类似：

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))

}

【讨论】：