LazyLayoutScrollScope

Function

Common

fun LazyLayoutScrollScope(state: LazyListState, scrollScope: ScrollScope): LazyLayoutScrollScope

An implementation of LazyLayoutScrollScope that can be used with LazyLists. Please refer to the sample to learn how to use this API.

Parameters


state	The `LazyListState` associated with the layout where this custom scroll should be performed.
scrollScope	The base `ScrollScope` where the scroll session was created.

Returns


	An implementation of `LazyLayoutScrollScope` that works with `LazyRow` and `LazyColumn`.

Common

fun LazyLayoutScrollScope(
    state: LazyStaggeredGridState,
    scrollScope: ScrollScope,
): LazyLayoutScrollScope

An implementation of LazyLayoutScrollScope that can be used with LazyStaggeredGrids.

Parameters


state	The `LazyStaggeredGridState` associated with the layout where this custom scroll should be performed.
scrollScope	The base `ScrollScope` where the scroll session was created.

Returns


	An implementation of `LazyLayoutScrollScope` that works with `LazyHorizontalStaggeredGrid` and `LazyVerticalStaggeredGrid`.

Common

fun LazyLayoutScrollScope(state: LazyGridState, scrollScope: ScrollScope): LazyLayoutScrollScope

An implementation of LazyLayoutScrollScope that can be used with LazyGrids.

Parameters


state	The `LazyGridState` associated with the layout where this custom scroll should be performed.
scrollScope	The base `ScrollScope` where the scroll session was created.

Returns


	An implementation of `LazyLayoutScrollScope` that works with `LazyHorizontalGrid` and `LazyVerticalGrid`.

Common

fun LazyLayoutScrollScope(state: PagerState, scrollScope: ScrollScope): LazyLayoutScrollScope

A LazyLayoutScrollScope that allows customization of animated scroll in Pager. The scope contains information about the layout where animated scroll can be performed as well as the necessary tools to do that respecting the scroll mutation priority.

Parameters


state	The `PagerState` associated with the layout where this animated scroll should be performed.
scrollScope	The base `ScrollScope` where the scroll session was created.

Returns


	An implementation of `LazyLayoutScrollScope` that works with `HorizontalPager` and `VerticalPager`.

Code Examples

LazyGridCustomScrollUsingLazyLayoutScrollScopeSample

@Composable
@Preview
fun LazyGridCustomScrollUsingLazyLayoutScrollScopeSample() {
    suspend fun LazyGridState.customScroll(block: suspend LazyLayoutScrollScope.() -> Unit) =
        scroll {
            block.invoke(LazyLayoutScrollScope(this@customScroll, this))
        }
    val itemsList = (0..100).toList()
    val state = rememberLazyGridState()
    val scope = rememberCoroutineScope()
    Column(Modifier.verticalScroll(rememberScrollState())) {
        Button(
            onClick = {
                scope.launch {
                    state.customScroll {
                        snapToItem(40, 0) // teleport to item 40
                        val distance = calculateDistanceTo(50).toFloat()
                        var previousValue = 0f
                        androidx.compose.animation.core.animate(
                            0f,
                            distance,
                            animationSpec = tween(5_000),
                        ) { currentValue, _ ->
                            previousValue += scrollBy(currentValue - previousValue)
                        }
                    }
                }
            }
        ) {
            Text("Scroll To Item 50")
        }
        LazyHorizontalGrid(
            state = state,
            rows = GridCells.Fixed(3),
            modifier = Modifier.height(600.dp).fillMaxWidth(),
        ) {
            items(itemsList) {
                Box(Modifier.padding(2.dp).background(Color.Red).size(45.dp)) {
                    Text(it.toString())
                }
            }
        }
    }
}

LazyListCustomScrollUsingLazyLayoutScrollScopeSample

@Composable
@Preview
fun LazyListCustomScrollUsingLazyLayoutScrollScopeSample() {
    suspend fun LazyListState.customScroll(block: suspend LazyLayoutScrollScope.() -> Unit) =
        scroll {
            block.invoke(LazyLayoutScrollScope(this@customScroll, this))
        }
    val itemsList = (0..100).toList()
    val state = rememberLazyListState()
    val scope = rememberCoroutineScope()
    Column(Modifier.verticalScroll(rememberScrollState())) {
        Button(
            onClick = {
                scope.launch {
                    state.customScroll {
                        snapToItem(40, 0) // teleport to item 40
                        val distance = calculateDistanceTo(50).toFloat()
                        var previousValue = 0f
                        androidx.compose.animation.core.animate(
                            0f,
                            distance,
                            animationSpec = tween(5_000),
                        ) { currentValue, _ ->
                            previousValue += scrollBy(currentValue - previousValue)
                        }
                    }
                }
            }
        ) {
            Text("Scroll To Item 50")
        }
        LazyRow(state = state) {
            items(itemsList) {
                Box(Modifier.padding(2.dp).background(Color.Red).size(45.dp)) {
                    Text(it.toString())
                }
            }
        }
    }
}

LazyStaggeredGridCustomScrollUsingLazyLayoutScrollScopeSample

@Composable
@Preview
fun LazyStaggeredGridCustomScrollUsingLazyLayoutScrollScopeSample() {
    suspend fun LazyStaggeredGridState.customScroll(
        block: suspend LazyLayoutScrollScope.() -> Unit
    ) = scroll { block.invoke(LazyLayoutScrollScope(this@customScroll, this)) }
    val itemsList = (0..100).toList()
    val state = rememberLazyStaggeredGridState()
    val scope = rememberCoroutineScope()
    Column(Modifier.verticalScroll(rememberScrollState())) {
        Button(
            onClick = {
                scope.launch {
                    state.customScroll {
                        snapToItem(40, 0) // teleport to item 40
                        val distance = calculateDistanceTo(50).toFloat()
                        var previousValue = 0f
                        androidx.compose.animation.core.animate(
                            0f,
                            distance,
                            animationSpec = tween(5_000),
                        ) { currentValue, _ ->
                            previousValue += scrollBy(currentValue - previousValue)
                        }
                    }
                }
            }
        ) {
            Text("Scroll To Item 50")
        }
        LazyHorizontalStaggeredGrid(
            state = state,
            rows = StaggeredGridCells.Fixed(3),
            modifier = Modifier.height(600.dp).fillMaxWidth(),
        ) {
            items(itemsList) {
                Box(Modifier.padding(2.dp).background(Color.Red).size(45.dp)) {
                    Text(it.toString())
                }
            }
        }
    }
}

PagerCustomScrollUsingLazyLayoutScrollScopeSample

@Preview
@Composable
fun PagerCustomScrollUsingLazyLayoutScrollScopeSample() {
    suspend fun PagerState.customScroll(block: suspend LazyLayoutScrollScope.() -> Unit) = scroll {
        block.invoke(LazyLayoutScrollScope(this@customScroll, this))
    }
    val itemsList = (0..100).toList()
    val state = rememberPagerState { itemsList.size }
    val scope = rememberCoroutineScope()
    Column(Modifier.verticalScroll(rememberScrollState())) {
        Button(
            onClick = {
                scope.launch {
                    state.customScroll {
                        snapToItem(40, 0) // teleport to item 40
                        val distance = calculateDistanceTo(50).toFloat()
                        var previousValue = 0f
                        androidx.compose.animation.core.animate(
                            0f,
                            distance,
                            animationSpec = tween(5_000),
                        ) { currentValue, _ ->
                            previousValue += scrollBy(currentValue - previousValue)
                        }
                    }
                }
            }
        ) {
            Text("Scroll To Item 50")
        }
        HorizontalPager(state) {
            Box(Modifier.padding(2.dp).background(Color.Red).height(600.dp).fillMaxWidth()) {
                Text(itemsList[it].toString())
            }
        }
    }
}