State of Compose 2023 results are in! Click here to learn more

← Back to Foundation

LazyVerticalStaggeredGrid

Component
in
Foundation
. Since 1.3.0

Overview

Code Examples

Vertical staggered grid layout that composes and lays out only items currently visible on screen.

Sample:

Overloads

LazyVerticalStaggeredGrid

@Composable
fun LazyVerticalStaggeredGrid(
    columns: StaggeredGridCells,
    modifier: Modifier = Modifier,
    state: LazyStaggeredGridState = rememberLazyStaggeredGridState(),
    contentPadding: PaddingValues = PaddingValues(0.dp),
    reverseLayout: Boolean = false,
    verticalItemSpacing: Dp = 0.dp,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.spacedBy(0.dp),
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
    userScrollEnabled: Boolean = true,
    content: LazyStaggeredGridScope.() -> Unit
)

Parameters

NameDescription
columnsdescription of the size and number of staggered grid columns.
modifiermodifier to apply to the layout.
statestate object that can be used to control and observe staggered grid state.
contentPaddingpadding around the content.
reverseLayoutreverse the direction of scrolling and layout. When true, items are laid out in the reverse order and LazyStaggeredGridState.firstVisibleItemIndex == 0 means that grid is scrolled to the bottom.
verticalItemSpacingvertical spacing between items.
horizontalArrangementarrangement specifying horizontal spacing between items. The item arrangement specifics are ignored for now.
flingBehaviorlogic responsible for handling fling.
userScrollEnabledwhether scroll with gestures or accessibility actions are allowed. It is still possible to scroll programmatically through state when userScrollEnabled is set to false
contenta lambda describing the staggered grid content. Inside this block you can use LazyStaggeredGridScope.items to present list of items or LazyStaggeredGridScope.item for a single one