by @alexstyl
✉️ Leave your feedback

← Back to Foundation

LazyVerticalStaggeredGrid

Component
in
Foundation
. Since 1.3.0

Overview

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 ComponentLazyVerticalGrid
Next ComponentProvideTextStyle