LazyGridState

A state object that can be hoisted to control and observe scrolling.

In most cases, this will be created via rememberLazyGridState.

Summary

Public companion properties
Saver<LazyGridState, *>

The default Saver implementation for LazyGridState.
Cmn

Public constructors
LazyGridState(
    firstVisibleItemIndex: Int,
    firstVisibleItemScrollOffset: Int
)
Cmn
@ExperimentalFoundationApi
LazyGridState(
    firstVisibleItemIndex: Int,
    firstVisibleItemScrollOffset: Int,
    prefetchStrategy: LazyGridPrefetchStrategy
)
Cmn

Public functions
suspend Unit
animateScrollToItem(index: @IntRange(from = 0) Int, scrollOffset: Int)

Animate (smooth scroll) to the given item.
Cmn
open Float

Dispatch scroll delta in pixels avoiding all scroll related mechanisms.
Cmn
Unit
requestScrollToItem(index: @IntRange(from = 0) Int, scrollOffset: Int)

Requests the item at index to be at the start of the viewport during the next remeasure, offset by scrollOffset, and schedules a remeasure.
Cmn
open suspend Unit
scroll(scrollPriority: MutatePriority, block: suspend ScrollScope.() -> Unit)

Call this function to take control of scrolling and gain the ability to send scroll events via ScrollScope.scrollBy.
Cmn
suspend Unit
scrollToItem(index: @IntRange(from = 0) Int, scrollOffset: Int)

Instantly brings the item at index to the top of the viewport, offset by scrollOffset pixels.
Cmn

Public properties
open Boolean

Whether this ScrollableState can scroll backward (consume a negative delta).
Cmn
open Boolean

Whether this ScrollableState can scroll forward (consume a positive delta).
Cmn
Int

The index of the first item that is visible within the scrollable viewport area, this means, not including items in the content padding region.
Cmn
Int

The scroll offset of the first visible item.
Cmn
InteractionSource

InteractionSource that will be used to dispatch drag events when this grid is being dragged.
Cmn
open Boolean

Whether this ScrollableState is currently scrolling by gesture, fling or programmatically or not.
Cmn
open Boolean

The value of this property is true under the following scenarios, otherwise it's false.
Cmn
open Boolean

The value of this property is true under the following scenarios, otherwise it's false.
Cmn
LazyGridLayoutInfo

The object of LazyGridLayoutInfo calculated during the last layout pass.
Cmn

Public companion properties

Saver

Cmn
Added in 1.2.0
val Saver: Saver<LazyGridState, *>

The default Saver implementation for LazyGridState.

Public constructors

LazyGridState

Cmn
Added in 1.2.0
LazyGridState(
    firstVisibleItemIndex: Int = 0,
    firstVisibleItemScrollOffset: Int = 0
)
Parameters
firstVisibleItemIndex: Int = 0

the initial value for LazyGridState.firstVisibleItemIndex
firstVisibleItemScrollOffset: Int = 0

the initial value for LazyGridState.firstVisibleItemScrollOffset

LazyGridState

Cmn
Added in 1.7.0
@ExperimentalFoundationApi
LazyGridState(
    firstVisibleItemIndex: Int = 0,
    firstVisibleItemScrollOffset: Int = 0,
    prefetchStrategy: LazyGridPrefetchStrategy = LazyGridPrefetchStrategy()
)
Parameters
firstVisibleItemIndex: Int = 0

the initial value for LazyGridState.firstVisibleItemIndex
firstVisibleItemScrollOffset: Int = 0

the initial value for LazyGridState.firstVisibleItemScrollOffset
prefetchStrategy: LazyGridPrefetchStrategy = LazyGridPrefetchStrategy()

the LazyGridPrefetchStrategy to use for prefetching content in this grid

Public functions

animateScrollToItem

Cmn
Added in 1.2.0
suspend fun animateScrollToItem(index: @IntRange(from = 0) Int, scrollOffset: Int = 0): Unit

Animate (smooth scroll) to the given item.

Parameters
index: @IntRange(from = 0) Int

the index to which to scroll. Must be non-negative.
scrollOffset: Int = 0

the offset that the item should end up after the scroll. Note that positive offset refers to forward scroll, so in a top-to-bottom list, positive offset will scroll the item further upward (taking it partly offscreen).

dispatchRawDelta

Cmn
Added in 1.8.0-alpha07
open fun dispatchRawDelta(delta: Float): Float

Dispatch scroll delta in pixels avoiding all scroll related mechanisms.

NOTE: unlike scroll, dispatching any delta with this method won't trigger nested scroll, won't stop ongoing scroll/drag animation and will bypass scrolling of any priority. This method will also ignore reverseDirection and other parameters set in scrollable.

This method is used internally for nested scrolling dispatch and other low level operations, allowing implementers of ScrollableState influence the consumption as suits them. Manually dispatching delta via this method will likely result in a bad user experience, you must prefer scroll method over this one.

Parameters
delta: Float

amount of scroll dispatched in the nested scroll process
Returns
Float

the amount of delta consumed

requestScrollToItem

Cmn
Added in 1.7.0
fun requestScrollToItem(index: @IntRange(from = 0) Int, scrollOffset: Int = 0): Unit

Requests the item at index to be at the start of the viewport during the next remeasure, offset by scrollOffset, and schedules a remeasure.

The scroll position will be updated to the requested position rather than maintain the index based on the first visible item key (when a data set change will also be applied during the next remeasure), but only for the next remeasure.

Any scroll in progress will be cancelled.

Parameters
index: @IntRange(from = 0) Int

the index to which to scroll. Must be non-negative.
scrollOffset: Int = 0

the offset that the item should end up after the scroll. Note that positive offset refers to forward scroll, so in a top-to-bottom list, positive offset will scroll the item further upward (taking it partly offscreen).

scroll

Cmn
Added in 1.8.0-alpha07
open suspend fun scroll(scrollPriority: MutatePriority, block: suspend ScrollScope.() -> Unit): Unit

Call this function to take control of scrolling and gain the ability to send scroll events via ScrollScope.scrollBy. All actions that change the logical scroll position must be performed within a scroll block (even if they don't call any other methods on this object) in order to guarantee that mutual exclusion is enforced.

If scroll is called from elsewhere, this will be canceled.

scrollToItem

Cmn
Added in 1.2.0
suspend fun scrollToItem(index: @IntRange(from = 0) Int, scrollOffset: Int = 0): Unit

Instantly brings the item at index to the top of the viewport, offset by scrollOffset pixels.

Parameters
index: @IntRange(from = 0) Int

the index to which to scroll. Must be non-negative.
scrollOffset: Int = 0

the offset that the item should end up after the scroll. Note that positive offset refers to forward scroll, so in a top-to-bottom list, positive offset will scroll the item further upward (taking it partly offscreen).

Public properties

canScrollBackward

Cmn 
open val canScrollBackward: Boolean

Whether this ScrollableState can scroll backward (consume a negative delta). This is typically false if the scroll position is equal to its minimum value, and true otherwise.

Note that true here does not imply that delta will be consumed - the ScrollableState may decide not to handle the incoming delta (such as if it is already being scrolled separately). Additionally, for backwards compatibility with previous versions of ScrollableState this value defaults to true.

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.KeyboardArrowDown
import androidx.compose.material.icons.filled.KeyboardArrowUp
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer

val state = rememberLazyListState()
Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
    Icon(
        Icons.Filled.KeyboardArrowUp,
        null,
        Modifier.graphicsLayer {
            // Hide the icon if we cannot scroll backward (we are the start of the list)
            // We use graphicsLayer here to control the alpha so that we only redraw when this
            // value changes, instead of recomposing
            alpha = if (state.canScrollBackward) 1f else 0f
        },
        Color.Red
    )
    val items = (1..100).toList()
    LazyColumn(Modifier.weight(1f).fillMaxWidth(), state) {
        items(items) { Text("Item is $it") }
    }
    Icon(
        Icons.Filled.KeyboardArrowDown,
        null,
        Modifier.graphicsLayer {
            // Hide the icon if we cannot scroll forward (we are the end of the list)
            // We use graphicsLayer here to control the alpha so that we only redraw when this
            // value changes, instead of recomposing
            alpha = if (state.canScrollForward) 1f else 0f
        },
        Color.Red
    )
}

canScrollForward

Cmn 
open val canScrollForward: Boolean

Whether this ScrollableState can scroll forward (consume a positive delta). This is typically false if the scroll position is equal to its maximum value, and true otherwise.

Note that true here does not imply that delta will be consumed - the ScrollableState may decide not to handle the incoming delta (such as if it is already being scrolled separately). Additionally, for backwards compatibility with previous versions of ScrollableState this value defaults to true.

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.KeyboardArrowDown
import androidx.compose.material.icons.filled.KeyboardArrowUp
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer

val state = rememberLazyListState()
Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
    Icon(
        Icons.Filled.KeyboardArrowUp,
        null,
        Modifier.graphicsLayer {
            // Hide the icon if we cannot scroll backward (we are the start of the list)
            // We use graphicsLayer here to control the alpha so that we only redraw when this
            // value changes, instead of recomposing
            alpha = if (state.canScrollBackward) 1f else 0f
        },
        Color.Red
    )
    val items = (1..100).toList()
    LazyColumn(Modifier.weight(1f).fillMaxWidth(), state) {
        items(items) { Text("Item is $it") }
    }
    Icon(
        Icons.Filled.KeyboardArrowDown,
        null,
        Modifier.graphicsLayer {
            // Hide the icon if we cannot scroll forward (we are the end of the list)
            // We use graphicsLayer here to control the alpha so that we only redraw when this
            // value changes, instead of recomposing
            alpha = if (state.canScrollForward) 1f else 0f
        },
        Color.Red
    )
}

firstVisibleItemIndex

Cmn
Added in 1.2.0
val firstVisibleItemIndex: Int

The index of the first item that is visible within the scrollable viewport area, this means, not including items in the content padding region. For the first visible item that includes items in the content padding please use LazyGridLayoutInfo.visibleItemsInfo.

Note that this property is observable and if you use it in the composable function it will be recomposed on every change causing potential performance issues.

If you want to run some side effects like sending an analytics event or updating a state based on this value consider using "snapshotFlow":

import androidx.compose.foundation.lazy.grid.LazyGridState
import androidx.compose.foundation.lazy.grid.rememberLazyGridState
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.runtime.snapshotFlow

val gridState = rememberLazyGridState()
LaunchedEffect(gridState) {
    snapshotFlow { gridState.firstVisibleItemIndex }
        .collect {
            // use the new index
        }
}

If you need to use it in the composition then consider wrapping the calculation into a derived state in order to only have recompositions when the derived value changes:

import androidx.compose.foundation.lazy.grid.LazyGridState
import androidx.compose.foundation.lazy.grid.rememberLazyGridState
import androidx.compose.material.Button
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.remember

val gridState = rememberLazyGridState()
val isAtTop by remember {
    derivedStateOf {
        gridState.firstVisibleItemIndex == 0 && gridState.firstVisibleItemScrollOffset == 0
    }
}
if (!isAtTop) {
    ScrollToTopButton(gridState)
}

firstVisibleItemScrollOffset

Cmn
Added in 1.2.0
val firstVisibleItemScrollOffset: Int

The scroll offset of the first visible item. Scrolling forward is positive - i.e., the amount that the item is offset backwards

interactionSource

Cmn
Added in 1.2.0
val interactionSource: InteractionSource

InteractionSource that will be used to dispatch drag events when this grid is being dragged. If you want to know whether the fling (or animated scroll) is in progress, use isScrollInProgress.

isScrollInProgress

Cmn
Added in 1.8.0-alpha07
open val isScrollInProgress: Boolean

Whether this ScrollableState is currently scrolling by gesture, fling or programmatically or not.

lastScrolledBackward

Cmn 
open val lastScrolledBackward: Boolean

The value of this property is true under the following scenarios, otherwise it's false.

lastScrolledForward

Cmn 
open val lastScrolledForward: Boolean

The value of this property is true under the following scenarios, otherwise it's false.

layoutInfo

Cmn
Added in 1.2.0
val layoutInfo: LazyGridLayoutInfo

The object of LazyGridLayoutInfo calculated during the last layout pass. For example, you can use it to calculate what items are currently visible.

Note that this property is observable and is updated after every scroll or remeasure. If you use it in the composable function it will be recomposed on every change causing potential performance issues including infinity recomposition loop. Therefore, avoid using it in the composition.

If you want to run some side effects like sending an analytics event or updating a state based on this value consider using "snapshotFlow":

import androidx.compose.foundation.lazy.grid.LazyGridState
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.lazy.grid.rememberLazyGridState
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.runtime.snapshotFlow

val gridState = rememberLazyGridState()
LaunchedEffect(gridState) {
    snapshotFlow { gridState.layoutInfo.totalItemsCount }
        .collect {
            // use the new items count
        }
}