Filling remaining space with Spacer on Jetpack Compose

user_1472511 0
Viewed 10416

I'm thinking I might be missing something, is there a way to achieve "fill the rest of the space" in Compose Beta01 without the extra Box element wrapping the spacer? Spacer has no weight modifier, unfortunately.

Column(
    modifier = Modifier
        .height(120.dp)
        .fillMaxWidth()
) {
    Text(
        text = "A"
    )
    Box(
        modifier = Modifier
            .weight(1f)
    ) {
        Spacer(
            Modifier
                .fillMaxHeight()
        )
    }
    Text(
        text = "B"
    )
}

Edit:

The extra box is not necessary at all, I was just misusing the modifier system. As a side note, the selected answer is probably another good way of achieving this.

android-jetpack-compose android
2 Answers

As far as I can see, Column.arrangement applies to all children evenly.

In case you just want to fill the remaining space to the max, a Spacer with weight(1.0f) modifier is probably what you want:

Column(
    modifier = Modifier
        .fillMaxWidth()
) {
    Text("Text A") // top aligned
    Spacer(modifier = Modifier.weight(1.0f)) // fill height with spacer
    Text("Text B") // those two Texts are bottom aligned
    Text("Text C") 
}
user_11286000

Is this what you need?

Column(
    modifier = Modifier
        .height(120.dp)
        .fillMaxWidth(),
    Arrangement.SpaceBetween
) {
    Text(text = "A")
    Text(text = "B")
}

You can arrange your elements as SpaceAround, SpaceEvenly and SpaceBetween.

user_55137880
Related