将框/列与屏幕底部对齐 Jetpack Compose

Question

我本质上希望将卡片固定在顶部，并将一组按钮固定在底部（在屏幕键盘上）

将 Column 与这样的修饰符一起使用只会导致按钮覆盖顶部的卡片：

fun HomeScreen() {
Column(
    modifier = Modifier
        .fillMaxWidth(),
    verticalArrangement = Arrangement.SpaceAround
) {
    WordGrid()
  }
Column(
    modifier = Modifier
        .fillMaxWidth(),
        verticalArrangement = Arrangement.Bottom
    ) {
        Keyboard()
       }

我尝试过使用所有不同的安排，使用行和使用框，但似乎无法让它工作。

奇怪的是，在 @Preview 中，上面的代码看起来好像可以工作，但是当在模拟器上运行时，它们都位于屏幕的顶部。

使用垫片是另一种选择，但这会导致其他问题吗？也许与屏幕尺寸等有关？

Answer 1

如果您希望按钮行固定在底部，则必须将 a 设置Column为weighta 1f，如下所示

MyTheme {
    Surface(color = MyTheme.colors.background) {
        // Cards content
        Column(
            modifier = Modifier.fillMaxWidth()
        ) {
            Column(
                modifier = Modifier.fillMaxWidth().weight(1f)
            ) {
                Card(
                    modifier = Modifier.fillMaxWidth().height(80.dp).padding(all = 16.dp),
                    backgroundColor = Color.Red,
                ) {
                    Text(text = "Card 1")
                }
                Card(
                    modifier = Modifier.fillMaxWidth().height(80.dp).padding(all = 16.dp),
                    backgroundColor = Color.Green,
                ) {
                    Text(text = "Card 2")
                }
                Card(
                    modifier = Modifier.fillMaxWidth().height(80.dp).padding(all = 16.dp),
                    backgroundColor = Color.Blue,
                ) {
                    Text(text = "Card 3")
                }
            }
            // Buttons content
            Row(
                modifier = Modifier.fillMaxWidth()
            ) {
                Button(
                    onClick = {},
                    modifier = Modifier.padding(horizontal = 8.dp)
                ) {
                    Text(text = "Button 1")
                }
                Button(
                    onClick = {},
                    modifier = Modifier.padding(horizontal = 8.dp)
                ) {
                    Text(text = "Button 3")
                }
                Button(
                    onClick = {},
                    modifier = Modifier.padding(horizontal = 8.dp)
                ) {
                    Text(text = "Button 2")
                }
            }
        }
    }
}