LazyVerticalGrid

Component in Compose Foundation

A lazy vertical grid layout. It composes only visible rows of the grid.

Last updated: 2024-10-22 13:47

Installation

dependencies {
   implementation("androidx.compose.foundation:foundation:1.8.0-alpha04")
}

Overloads

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

Parameters

name	description
columns	describes the count and the size of the grid's columns, see [GridCells] doc for more information
modifier	the modifier to apply to this layout
state	the state object to be used to control or observe the list's state
contentPadding	specify a padding around the whole content
reverseLayout	reverse the direction of scrolling and layout. When true, items will be laid out in the reverse order and [LazyGridState.firstVisibleItemIndex] == 0 means that grid is scrolled to the bottom. Note that [reverseLayout] does not change the behavior of [verticalArrangement], e.g. with [Arrangement.Top] (top) 123### (bottom) becomes (top) 321### (bottom).
verticalArrangement	The vertical arrangement of the layout's children
horizontalArrangement	The horizontal arrangement of the layout's children
flingBehavior	logic describing fling behavior
userScrollEnabled	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.
content	the [LazyGridScope] which describes the content

Code Examples

LazyVerticalGridSample

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

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

    LazyVerticalGrid(columns = GridCells.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)
        }
    }
}

LazyVerticalGridSpanSample

@Composable
fun LazyVerticalGridSpanSample() {
    val sections = (0 until 25).toList().chunked(5)
    LazyVerticalGrid(
        columns = 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).height(80.dp).wrapContentSize()
                )
            }
            items(
                items,
                // not required as it is the default
                span = { GridItemSpan(1) }
            ) {
                Text("Item $it", Modifier.border(1.dp, Color.Blue).height(80.dp).wrapContentSize())
            }
        }
    }
}