https://kotlinlang.org logo
m

mmaillot

02/25/2021, 4:02 PM
How can I do that with compose ?
Copy code
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).
t

Timo Drick

02/25/2021, 4:07 PM
Just add to the green Column a modifier.weight(1f)
m

mmaillot

02/25/2021, 4:14 PM
I don’t have the weight function 😕
t

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
   }
m

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.
t

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.
s

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
m

mmaillot

02/25/2021, 4:22 PM
Ok, thank you both ! It works 🙂 👍
👍 2
3 Views