Выровняйте поле/столбец по нижнему краю экрана Jetpack Compose

Question

По сути, я хочу, чтобы карты были закреплены вверху, а группа кнопок закреплена внизу (на экранной клавиатуре).

Использование столбца с таким модификатором приводит только к тому, что кнопки закрывают верхние карты:

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

Я пытался использовать все различные аранжировки, использовать ряд и ящики, но не могу заставить его работать.

Любопытно, что в @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")
                }
            }
        }
    }
}