将Jetpack Compose中的盒子/列对齐到屏幕底部

Question

我希望在顶部固定一些卡片，并在底部固定一组按钮（屏幕键盘）。使用像这样的 Column 修饰符只会导致按钮遮盖顶部的卡片：

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

我已经尝试使用所有不同的排列方式，包括行和方框，但似乎无法使其正常工作。

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

使用间隔是另一种选择，但这会在其他方面引起问题吗？也许与屏幕大小有关吗？

- Joe Pleavin

---

从描述中不太清楚您想要什么。您能否请提供预览的屏幕截图？ - Marat

有人实际上回答了它，问题是列重叠。如果在Linux上有一种简单的方法来获取预览的屏幕截图，那么我很乐意发布一份前后对比供将来参考。 - Joe Pleavin

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

- Francesc

---

这个完美地运作。顶部列的权重为1F，底部列没有权重。底部列现在实际上处于底部是否有原因？如果我添加一个权重为1F的中间列，它也会与第一列粘在一起，并将底部推下去吗？ - Joe Pleavin

首先测量没有体重的孩子。然后，剩余的空间将按照孩子们的体重比例分配给有体重的孩子。如果你有两个体重为1f的孩子，每个孩子将占据剩余空间的一半。 - Francesc