I was trying to create a LazyColumn
containing Cards, each containing 3 elements: a Row, a Divider, and another Row. The issue arises when I use Modifier.weight(0.25f)
within one of the Rows. I intended the second Row to have a size equal to 1/4 of the first one. However, that Row simply disappears. Why is that? I know I could just fix the size of the second Row as well, but i want to understand why in this way isn't working properly
LazyColumn(modifier){
items(topTens){
Column {
Row(
Modifier
.height(20.dp)
.background(Color.Magenta)
) {
Text(text = "Prova1")
}
Row(
Modifier
.weight(0.25f, false)
.background(Color.Green)
) {
Text(text = "Prova2")
}
}
}
}
The problem seems to happen only if I nest rows into Column. If nest columns into row the problem doesnt happen. So if I have somehting like
LazyColumn(modifier=modifier.fillMaxHeight()){
items(topTens){
Row {
Column(
Modifier
.width(100.dp)
.background(Color.Magenta)
) {
Text(text = "Prova1")
}
Column(
Modifier
.weight(0.25f, false)
.background(Color.Green)
) {
Text(text = "Prova2")
}
}}
}
Everything works as intended and I see 2 Columns.
In this scenario, the issue arises because when a weight is applied in a column scope, the column divides the vertical space remaining after measuring unweighted elements and distributes it according to the weights. However, when a column is a child of a scrollable column, and the calculation of remaining vertical space made by .weight becomes infinite so Jetpack Compose ignores the weight.
But why doesn't this issue occur when Rows are used instead of Columns?
The solution to this problem is to avoid making the remaining vertical space infinite for the column that having a weight. you can do that by fixing a height for that column.
Column(Modifier.height(200.dp)) {
Row(
Modifier
.height(80.dp)
.weight(1f)
.background(Color.Magenta)
) {
Text(text = "Prova1")
}
Row(
Modifier
.weight(0.25f, true)
.background(Color.Green)
) {
Text(text = "Prova2")
}
}