I have a HorizontalGridLayout with 2 rows. I receive a variable number of items to fill it. When I receive a large number of items everithing is fine. But the problems arise when I have few items.
I’m forcing the grid to have only one line when I have fewer than 6 items and that works well also. But if I have 6 I would want for the first line to fill up and the 6 item to apear bellow.
I know this behaviour sounds more like a Flow Layout. But I also need it to have horizontal scrolling for the case when I have a lot of items and I can’t have more than 2 lines.
Here is a representation of what I’m obtaining:
And what I’m trying to achieve:
Here is my code for the horizontal grid:
@Composable
fun HorizontalGridLayout(
rowNumber: Int,
columnList: List<@Composable (ColumnScope.() -> Unit)>,
modifier: Modifier = Modifier,
) {
LazyHorizontalGrid(
modifier = modifier,
rows = GridCells.Fixed(rowNumber),
verticalArrangement = Arrangement.spacedBy(spacerSize),
horizontalArrangement = Arrangement.spacedBy(spacerSize)
) {
repeat(rowNumber) {
item {
Spacer(Modifier.width(horizontalSpacing))
}
}
items(
count = columnList.size,
key = {
columnList[it].hashCode()
}, itemContent = { column ->
Column(
content = columnList[column]
)
if (column < columnList.size - 1) {
Spacer(Modifier.width(spacerSize))
}
}
)
repeat(rowNumber) {
item {
Spacer(Modifier.width(horizontalSpacing))
}
}
}
}