LazyVerticalStaggeredGrid

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

Common

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

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

Sample:

Sample with custom item spans:

Parameters


columns	description of the size and number of staggered grid columns.
modifier	modifier to apply to the layout.
state	state object that can be used to control and observe staggered grid state.
contentPadding	padding around the content.
reverseLayout	reverse 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.
verticalItemSpacing	vertical spacing between items.
horizontalArrangement	arrangement specifying horizontal spacing between items. The item arrangement specifics are ignored for now.
flingBehavior	logic responsible for handling fling.
userScrollEnabled	whether scroll with gestures or accessibility actions are allowed. It is still possible to scroll programmatically through state when `userScrollEnabled` is set to false
overscrollEffect	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	a 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.

Common

Deprecated Use the non deprecated overload

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