Composable Function

LazyVerticalStaggeredGrid

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

LazyVerticalStaggeredGrid

Source set: Common
@Composable
public 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(),
    cacheWindow: LazyLayoutCacheWindow = LazyStaggeredGridDefaults.cacheWindow(state),
    content: LazyStaggeredGridScope.() -> Unit,
)

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

Sample:

Sample with custom item spans:

Sample with custom cache window:

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.
cacheWindow LazyLayoutCacheWindow configuring the area ahead and behind the viewport to prefetch and retain items. The default cache window does not cache items while the user is not scrolling. Override this to tune scrolling performance, such as increasing the ahead window to reduce frame drops during scrolling or adding a behind window to retain recently visible items when scrolling back and forth.
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.

LazyVerticalStaggeredGrid

Source set: Common
@Composable
public 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.

LazyVerticalStaggeredGrid

Source set: Common
@Deprecated("Use the non deprecated overload", level = DeprecationLevel.HIDDEN)
@Composable
public 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,
)

Content updated: