I have an app using LazyColumn. On my device, when there are insufficient items to fill the column, it’s vertically spacing them equally with large gaps in between, even though I’ve specified verticalArrangement = Arrangement.Top. The Preview for some reason is minimally-spaced as expected even though the API versions are set to be the same (34). I’m not getting any clues from Layout Inspector as to why it’s not grouping my cards – all the attributes are as I’d expect. What could be causing this?
LazyColumn(
modifier = modifier
.padding(4.dp),
verticalArrangement = Arrangement.Top
) {
items(
items = airports,
key = { airport -> airport.id }
) { airport ->
if (airport.id != currentAirport.id) {
Card(
modifier = modifier
.fillMaxWidth(),
colors = CardDefaults.cardColors(
containerColor = MaterialTheme.colorScheme.surfaceVariant
),
elevation = CardDefaults.cardElevation(defaultElevation = 8.dp)
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(4.dp),
verticalAlignment = Alignment.CenterVertically
) {
Column(
modifier = Modifier
.fillMaxHeight()
.weight(1f)
) {
Text(
text = stringResource(R.string.depart),
)
AirportInfoRow(airport = currentAirport)
Text(
text = stringResource(R.string.arrive)
)
AirportInfoRow(airport = airport)
}
Column(
modifier = Modifier
.width(30.dp),
) {
Image(
painter = painterResource(id = R.drawable.star_outline),
contentDescription = "",
modifier = Modifier
.fillMaxWidth()
.clickable { } // TODO toggle favorite
)
}
}
}
}
}
}
Here’s a screenshot with layout inspector. What could be causing the 3 cards not to be grouped at the top of the LazyColumn?
The problem turned out to be higher up the component tree.
The tree was:
Scaffold
SearchBar
LazyColumn
The Scaffold was passing an innerPadding value to the modifier of the SearchBar. This was evidently introducing a lot of vertical spacing in between the components in the LazyColumn.