Composable Function

LazyLayout

A layout that only composes and lays out currently needed items.

LazyLayoutSample

/** A Lazy Layout that will place items right to left with scrolling support. */
@Sampled
@Preview
@Composable
fun LazyLayoutSample() {
    val items = remember { (0..100).toList().map { it.toString() } }

    // Create an item provider
    val itemProvider = remember {
        {
            object : LazyLayoutItemProvider {
                override val itemCount: Int
                    get() = 100

LazyLayoutScrollableSample

/** A simple Layout that will place items right to left with scrolling support. */
@Sampled
@Preview
@Composable
fun LazyLayoutScrollableSample() {
    val items = remember { (0..100).toList().map { it.toString() } }

    /** Saves the deltas from the scroll gesture. */
    var scrollAmount by remember { mutableFloatStateOf(0f) }

    /**
     * Lazy Layout measurement starts at a known position identified by the first item's position.
     */
    var firstVisibleItemIndex by remember { mutableIntStateOf(0) }
    var firstVisibleItemOffset by remember { mutableIntStateOf(0) }

    // A scrollable state is needed for scroll support
    val scrollableState = rememberScrollableState { delta ->
        scrollAmount += delta
        delta // assume we consumed everything.
    }

    // Create an item provider
    val itemProvider = {
        object : LazyLayoutItemProvider {
            override val itemCount: Int
                get() = items.size
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: