How can I do that with compose ```Column modifier = Modifier kotlinlang #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

Copy code

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

02/25/2021, 4:07 PM

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

mmaillot

02/25/2021, 4:14 PM

I don’t have the weight function 😕

Timo Drick

02/25/2021, 4:14 PM

it is only available inside of a Row or Column

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

Copy code

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

mmaillot

02/25/2021, 4:16 PM

I have this code :

Copy code

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

But failed to compile

Expression 'weight' cannot be invoked as a function.

Timo Drick

02/25/2021, 4:17 PM

Copy code

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

It is the same like in the old LinearLayout weight.

Se7eN

02/25/2021, 4:21 PM

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()

Copy code

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

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

💯 1

mmaillot

02/25/2021, 4:22 PM

Ok, thank you both ! It works 🙂 👍

👍 2

3 Views