← Back to Foundation
LazyVerticalStaggeredGrid
Component
in
Foundation
. Since 1.3.0Overview
Examples
Community Notes
@Composable
fun LazyVerticalStaggeredGridSample() {
val itemsList = (0..5).toList()
val itemsIndexedList = listOf("A", "B", "C")
val itemModifier = Modifier.border(1.dp, Color.Blue).wrapContentSize()
LazyVerticalStaggeredGrid(
columns = StaggeredGridCells.Fixed(3)
) {
items(itemsList) {
Text("Item is $it", itemModifier.height(80.dp))
}
item {
Text("Single item", itemModifier.height(100.dp))
}
itemsIndexed(itemsIndexedList) { index, item ->
Text("Item at index $index is $item", itemModifier.height(60.dp))
}
}
}
@Composable
fun LazyVerticalStaggeredGridSpanSample() {
val sections = (0 until 25).toList().chunked(5)
LazyVerticalStaggeredGrid(
columns = StaggeredGridCells.Fixed(3),
horizontalArrangement = Arrangement.spacedBy(16.dp),
verticalItemSpacing = 16.dp
) {
sections.forEachIndexed { index, items ->
item(span = StaggeredGridItemSpan.FullLine) {
Text(
"This is section $index",
Modifier.border(1.dp, Color.Gray).height(80.dp).wrapContentSize()
)
}
items(
items,
// not required as it is the default
span = { StaggeredGridItemSpan.SingleLane }
) {
Text(
"Item $it",
Modifier.border(1.dp, Color.Blue).height(80.dp).wrapContentSize()
)
}
}
}
}
Previous Component← LazyVerticalGrid
Next ComponentProvideTextStyle →