New Compose Multiplatform components arrived on Composables UICheck it out →

Component in Compose Foundation

LazyHorizontalGrid

Common

A lazy horizontal grid layout. It composes only visible columns of the grid.

Last updated:

Installation

dependencies {
   implementation("androidx.compose.foundation:foundation:1.7.0-beta04")
}

Overloads

@Composable
fun LazyHorizontalGrid(
    rows: GridCells,
    modifier: Modifier = Modifier,
    state: LazyGridState = rememberLazyGridState(),
    contentPadding: PaddingValues = PaddingValues(0.dp),
    reverseLayout: Boolean = false,
    horizontalArrangement: Arrangement.Horizontal =
        if (!reverseLayout) Arrangement.Start else Arrangement.End,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
    userScrollEnabled: Boolean = true,
    content: LazyGridScope.() -> Unit
)

Parameters

namedescription
rowsa class describing how cells form rows, see [GridCells] doc for more information
modifierthe modifier to apply to this layout
statethe state object to be used to control or observe the list's state
contentPaddingspecify a padding around the whole content
reverseLayoutreverse the direction of scrolling and layout. When true, items are laid out in the reverse order and [LazyGridState.firstVisibleItemIndex] == 0 means that grid is scrolled to the end. Note that [reverseLayout] does not change the behavior of [horizontalArrangement], e.g. with [Arrangement.Start] [123###] becomes [321###].
verticalArrangementThe vertical arrangement of the layout's children
horizontalArrangementThe horizontal arrangement of the layout's children
flingBehaviorlogic describing fling behavior
userScrollEnabledwhether the scrolling via the user gestures or accessibility actions is allowed. You can still scroll programmatically using the state even when it is disabled.
contentthe [LazyGridScope] which describes the content

Code Examples

LazyHorizontalGridSample

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

    val itemModifier = Modifier
        .border(1.dp, Color.Blue)
        .width(80.dp)
        .wrapContentSize()

    LazyHorizontalGrid(
        rows = GridCells.Fixed(3),
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        items(itemsList) {
            Text("Item is $it", itemModifier)
        }

        item {
            Text("Single item", itemModifier)
        }

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

LazyHorizontalGridSpanSample

@Composable
@Sampled
fun LazyHorizontalGridSpanSample() {
    val sections = (0 until 25).toList().chunked(5)
    LazyHorizontalGrid(
        rows = GridCells.Fixed(3),
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        sections.forEachIndexed { index, items ->
            item(span = { GridItemSpan(maxLineSpan) }) {
                Text(
                    "This is section $index",
                    Modifier
                        .border(1.dp, Color.Gray)
                        .width(80.dp)
                        .wrapContentSize()
                )
            }
            items(
                items,
                // not required as it is the default
                span = { GridItemSpan(1) }
            ) {
                Text(
                    "Item $it",
                    Modifier
                        .border(1.dp, Color.Blue)
                        .width(80.dp)
                        .wrapContentSize()
                )
            }
        }
    }
}