I essentially want cards pinned to the top with a group of buttons pinned to the bottom (on screen keyboard)

Using Column with a modifier like so only leads to the buttons covering the top cards:

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

I have tried using all the different Arrangements, using a row and using Boxes, but can't seem to get it to work.

Curiously, in the @Preview it looks as though the above code works, but when ran on an emulator they are both at the top of the screen.

Using a spacer is another option, but would this cause issues in other ways? maybe with screen sizes etc?

CodePudding user response：

If you want your buttons row to be pinned to the bottom, you have to set the Column to have a weight of 1f, something like this

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