LazyHorizontalGrid

Functions summary

Unit
@Composable
LazyHorizontalGrid(
    rows: GridCells,
    modifier: Modifier,
    state: LazyGridState,
    contentPadding: PaddingValues,
    reverseLayout: Boolean,
    horizontalArrangement: Arrangement.Horizontal,
    verticalArrangement: Arrangement.Vertical,
    flingBehavior: FlingBehavior,
    userScrollEnabled: Boolean,
    overscrollEffect: OverscrollEffect?,
    content: LazyGridScope.() -> Unit
)

A lazy horizontal grid layout.

Cmn

Functions

LazyHorizontalGrid

@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,
    overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
    content: LazyGridScope.() -> Unit
): Unit

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

Sample:

import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyHorizontalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.lazy.grid.itemsIndexed
import androidx.compose.material.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

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)
    }
}

Sample with custom item spans:

import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.GridItemSpan
import androidx.compose.foundation.lazy.grid.LazyHorizontalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.material.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

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())
        }
    }
}
Parameters
rows: GridCells

a class describing how cells form rows, see GridCells doc for more information

modifier: Modifier = Modifier

the modifier to apply to this layout

state: LazyGridState = rememberLazyGridState()

the state object to be used to control or observe the list's state

contentPadding: PaddingValues = PaddingValues(0.dp)

specify a padding around the whole content

reverseLayout: Boolean = false

reverse 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 123### becomes 321###.

horizontalArrangement: Arrangement.Horizontal = if (!reverseLayout) Arrangement.Start else Arrangement.End

The horizontal arrangement of the layout's children

verticalArrangement: Arrangement.Vertical = Arrangement.Top

The vertical arrangement of the layout's children

flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior()

logic describing fling behavior

userScrollEnabled: Boolean = true

whether the scrolling via the user gestures or accessibility actions is allowed. You can still scroll programmatically using the state even when it is disabled.

overscrollEffect: OverscrollEffect? = rememberOverscrollEffect()

the OverscrollEffect that will be used to render overscroll for this layout. Note that the OverscrollEffect.node will be applied internally as well - you do not need to use Modifier.overscroll separately.

content: LazyGridScope.() -> Unit

the LazyGridScope which describes the content