Weights in Jetpack compose
You can use the Modifier.weight
Something like:
Row() {
Column(
Modifier.weight(1f).background(Blue)){
Text(text = "Weight = 1", color = Color.White)
}
Column(
Modifier.weight(2f).background(Yellow)
) {
Text(text = "Weight = 2")
}
}
Since "0.1.0-dev09" modifiers are moved on an interface, you can use
Modifier.weight(float, boolean)
to divide the vertical/horizontal space remaining after measuring unweighted child elements and distribute it according to this weight
Column {
Row(modifier = Modifier.weight(2.0f, true)) {
Box (
modifier = Modifier.fillMaxWidth().fillMaxHeight(),
backgroundColor = Color.Red
)
}
Row(modifier = Modifier.weight(1.0f, true)) {
Box (
modifier = Modifier.fillMaxWidth().fillMaxHeight(),
backgroundColor = Color.Blue,
gravity = ContentGravity.Center
) {
Text(text = "A sample text")
}
}
Row(modifier = Modifier.weight(2.0f, true)) {
Box (
modifier = Modifier.fillMaxWidth().fillMaxHeight(),
backgroundColor = Color.Yellow
)
}
}
The "0.1.0-dev04" release of Jetpack Compose contains changes, and FlexRow is deprecated. I can propose the following solution:
Row {
Card(modifier = LayoutFlexible(1f), color = Color.Red) {
Container(expanded = true, height = 50.dp) {
}
}
Card(modifier = LayoutFlexible(2f), color = Color.Green) {
Container(expanded = true, height = 50.dp) {
}
}
}
Result:
The LayoutFlexible(flex = _f) helps us to solve the issue and Modifier can be applied to any container.
Use Modifier.weight(float) on the objects inside a container.
You could also use constraintlayout or the Low Level Layout
Composable. Check out the official compose layout codelab in compose pathways for more info on the same