Composable Function

LazyHorizontalStaggeredGrid

Horizontal staggered grid layout that composes and lays out only items currently visible on screen.

LazyHorizontalStaggeredGridSample

@Sampled
@Preview
@Composable
fun LazyHorizontalStaggeredGridSample() {
    val itemsList = (0..5).toList()
    val itemsIndexedList = listOf("A", "B", "C")

    val itemModifier = Modifier.border(1.dp, Color.Blue).padding(16.dp).wrapContentSize()

    LazyHorizontalStaggeredGrid(rows = StaggeredGridCells.Fixed(3)) {
        items(itemsList) { Text("Item is $it", itemModifier) }
        item { Text("Single item", itemModifier) }
        itemsIndexed(itemsIndexedList) { index, item ->
            Text("Item at index $index is $item", itemModifier)
        }
    }
}

LazyHorizontalStaggeredGridSpanSample

@Sampled
@Preview
@Composable
fun LazyHorizontalStaggeredGridSpanSample() {
    val sections = (0 until 25).toList().chunked(5)
    LazyHorizontalStaggeredGrid(
        rows = StaggeredGridCells.Fixed(3),
        verticalArrangement = Arrangement.spacedBy(16.dp),
        horizontalItemSpacing = 16.dp,
    ) {
        sections.forEachIndexed { index, items ->
            item(span = StaggeredGridItemSpan.FullLine) {
                Text(
                    "This is section $index",
                    Modifier.border(1.dp, Color.Gray).padding(16.dp).wrapContentSize(),
                )
            }
            items(
                items,
                // not required as it is the default
                span = { StaggeredGridItemSpan.SingleLane },
            ) {
                Text("Item $it", Modifier.border(1.dp, Color.Blue).width(80.dp).wrapContentSize())
            }
        }
    }
}

LazyStaggeredGridCacheWindowSample

@Sampled
@Composable
fun LazyStaggeredGridCacheWindowSample() {
    val itemsList = (0..100).toList()

    LazyVerticalStaggeredGrid(
        columns = StaggeredGridCells.Fixed(3),
        cacheWindow = LazyLayoutCacheWindow(aheadFraction = 0.5f, behindFraction = 0.2f),
    ) {
        items(itemsList) { item -> Text("Item $item") }
    }
}
Jetpack Compose beyond MaterialFree components, screens and templates for apps that don’t look like Google’s. Copy them into your app, or let your coding agent add them.Browse for free

Content updated: