Composable Function

LazyColumn

The vertically scrolling list that only composes and lays out the currently visible items.

LazyColumnSample

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

    LazyColumn {
        items(itemsList) { Text("Item is $it") }

        item { Text("Single item") }

        itemsIndexed(itemsIndexedList) { index, item -> Text("Item at index $index is $item") }
    }
}

LazyColumnWithLazyRowsSample

@Sampled
@Preview
@Composable
fun LazyColumnWithLazyRowsSample() {
    LazyColumn {
        items(100) { row ->
            val color = if (row % 2 == 0) Color.Red else Color.Blue
            LazyRow(modifier = Modifier.background(color).padding(2.dp)) {
                items(20) { column ->
                    Box(Modifier.size(64.dp).padding(2.dp)) { Text("row=$row column=$column") }
                }
            }
        }
    }
}

LazyListCacheWindowSample

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

    LazyColumn(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: