将 Box/Column 与屏幕底部对齐 Jetpack Compose

Question

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

像这样使用 Column 和修饰符只会导致按钮覆盖顶部卡片：

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

我试过使用所有不同的 Ar运行gements，使用行和框，但似乎无法正常工作。

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

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

Answer 1

如果您希望按钮行固定在底部，您必须将 Column 设置为 weight 的 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")
                }
            }
        }
    }
}