Introduction
For most grid situations we could use LazyVerticalGrid
. But not if you want to add the grid to a scrollable column with multiple scrollable elements.
My custom grid-component fixes this exception:
Nesting scrollable in the same direction layouts like LazyColumn and Column(Modifier.verticalScroll()) is not allowed.
Example
Usage
=> The number of columns can be passed via columns
-property.
Column(
modifier = Modifier
.fillMaxWidth()
) {
Text(
text = "Features",
style = MaterialTheme.typography.h1,
modifier = Modifier.padding(15.dp)
)
NonlazyGrid(
columns = 3,
itemCount = features.size,
modifier = Modifier
.padding(start = 7.5.dp, end = 7.5.dp)
) {
FeatureItem(features[it])
}
}
Implementation
@Composable
fun NonlazyGrid(
columns: Int,
itemCount: Int,
modifier: Modifier = Modifier,
content: @Composable() (Int) -> Unit
) {
Column(modifier = modifier) {
var rows = (itemCount / columns)
if (itemCount.mod(columns) > 0) {
rows += 1
}
for (rowId in 0 until rows) {
val firstIndex = rowId * columns
Row {
for (columnId in 0 until columns) {
val index = firstIndex + columnId
Box(
modifier = Modifier
.fillMaxWidth()
.weight(1f)
) {
if (index < itemCount) {
content(index)
}
}
}
}
}
}
}
Top comments (4)
You are amazing!
But it is very weird that I couldn't find any official implementation for this.
For example the
shrinkWrap
parameter on ListView in Flutter.Really helped me out, thank you
you deserve eternal glory
Glad it helped :)