https://kotlinlang.org logo
Channels
Powered by
#compose
Title
# compose
n

Nat Strangerweather

09/12/2020, 10:59 AM
I'm trying to understand how to use layouts. I have :
Copy code
Column(Modifier.fillMaxHeight()) {}
Why are the bottom squares no reaching the bottom of the screen? I have not put any padding.
y

Yann Badoual

09/12/2020, 11:02 AM
The column is actually filling the vertical space, but it doesn't mean that the content will be stretched to fill the parent.
n

Nat Strangerweather

09/12/2020, 11:03 AM
Ah ok thanks, how do I get the content to fill the parent?
y

Yann Badoual

09/12/2020, 11:03 AM
You can probably use 
weight
modifier to achieve that. Setting the same weight on each children
n

Nat Strangerweather

09/12/2020, 11:03 AM
I already have
y

Yann Badoual

09/12/2020, 11:04 AM
Can you share the code please?
n

Nat Strangerweather

09/12/2020, 11:04 AM
sure
Copy code
MaterialTheme {
        Column(Modifier.fillMaxHeight()) {
            val modifier1 = Modifier
                .fillMaxWidth()
                .weight(1f)

            val modifier = Modifier
                .size(150.dp)
                .weight(1f)

            Row(modifier1) {
                Box(modifier, backgroundColor = Color.Magenta)
                Box(modifier, backgroundColor = Color.Cyan)
            }
            Row(modifier1) {
                Box(modifier, backgroundColor = Color.Magenta)
                Box(modifier, backgroundColor = Color.Cyan)
            }
            Row(modifier1) {
                Box(modifier, backgroundColor = Color.Magenta)
                Box(modifier, backgroundColor = Color.Cyan)
            }
        }
    }
y

Yann Badoual

09/12/2020, 11:09 AM
Use 
fillMaxHeight()
instead of 
size(150.dp)
=> you're manually setting the size to 150.dp, so the actual box is not stretching because of it
n

Nat Strangerweather

09/12/2020, 11:11 AM
Ok, thanks for this, makes sense!🙂
👍 1
s

sante

09/12/2020, 12:52 PM
Also, if you want your boxes to keep that size, you can use verticalArrangement for Column (horizontalArrangement for Row). you set it like
Copy code
Column(
   modifier = fillMaxHeight(),
   verticalArrangement = Arrangement.SpaceBetween,
){
   ...
}
You have other options for arrangement like SpaceAround and SpaceEvenly. The option in the snippet makes it so that the contents of the column are spread from top to bottom, with the first element right at the top and the last one right at the end
👍 1
Powered by