How can I do that with compose ? ```Column(modifie...

# compose

[mmaillot]

How can I do that with compose ?

Column(modifier = Modifier.fillMaxHeight(), verticalArrangement = Arrangement.SpaceBetween) {
        Header()
        Content()
        Bottom()
    }

I have this code for the whole screen. In my Content component, I have the 6 squares which are well aligned with SpaceAround.

Column(
        modifier = Modifier.fillMaxWidth(),
        verticalArrangement = Arrangement.SpaceAround,
    ) {
        Row(
            horizontalArrangement = Arrangement.SpaceAround,
            modifier = Modifier.fillMaxWidth(),
        ) {
            Square()
            Square()
            Square()
        }
        Row(
            horizontalArrangement = Arrangement.SpaceAround,
            modifier = Modifier.fillMaxWidth(),
        ) {
            Square()
            Square()
            Square()
        }
    }

I want the green part to take all place between Header (fixed height) and ProgressBar (fixed height too).

[Timo Drick]

Just add to the green Column a modifier.weight(1f)

[mmaillot]

I don’t have the weight function 😕

[Timo Drick]

it is only available inside of a Row or Column

[Timo Drick]

In your case it should be there. Are you sure it is not there? Just try to type it without auto completion.

[Timo Drick]

Column {
   Row { //top bar }
   Column(Modifier.weight(1f)) {
       //Green boxes
   }

[mmaillot]

I have this code :

Column(
        modifier = Modifier.weight(1f).fillMaxWidth(),
        verticalArrangement = Arrangement.SpaceAround,
    ) {
        ...
    }

But failed to compile Expression 'weight' cannot be invoked as a function.

[Timo Drick]

Column(modifier = Modifier.fillMaxHeight(), verticalArrangement = Arrangement.SpaceBetween) {
        Header()
        Column(Modifier.weight(1f).fillMaxWidth()) {
            ...
        }
        Bottom()
    }

[Timo Drick]

It is the same like in the old LinearLayout weight.

[Se7eN]

You need a ColumnScope to use it. You'll have to pass Modifier.weight(1f) to your Content function or write your Content function as fun ColumnScope.Content()

Column(modifier = Modifier.fillMaxHeight(), verticalArrangement = Arrangement.SpaceBetween) {
        Header()
        Content(modifier = Modifier.weight(1f))
        Bottom()
    }

@Composable fun Content(modifier: Modifier) {
    Column(modifier = modifier) {
        ...
    }
}

[mmaillot]

Ok, thank you both ! It works 🙂 👍