Function

withoutVisualEffect

Returns a wrapped version of this OverscrollEffect with an empty OverscrollEffect.node.

OverscrollRenderedOnTopOfLazyListDecorations

@Sampled
@Composable
fun OverscrollRenderedOnTopOfLazyListDecorations() {
    val items = remember { (1..100).toList() }
    val state = rememberLazyListState()
    val overscroll = rememberOverscrollEffect()
    // Create a wrapped version of the above overscroll effect that does not apply a visual effect.
    // This will be used inside LazyColumn to provide events to overscroll, without letting
    // LazyColumn render the overscroll effect internally.
    val overscrollWithoutVisualEffect = overscroll?.withoutVisualEffect()
    LazyColumn(
        content = { items(items) { Text("Item $it") } },
        state = state,
        modifier =
            Modifier.size(300.dp)
                .clip(RectangleShape)
                // Manually render the overscroll on top of the lazy list _and_ the 'decorations' we
                // are
                // manually drawing, to make sure they will also be included in the overscroll
                // effect.
                .overscroll(overscroll)
                .drawBehind {
                    state.layoutInfo.visibleItemsInfo.drop(1).forEach { info ->
                        val verticalOffset = info.offset.toFloat()
                        drawLine(
                            color = Color.Red,
                            start = Offset(0f, verticalOffset),
                            end = Offset(size.width, verticalOffset),
                        )
                    }
                },
        // Pass the overscroll effect that does not apply a visual effect inside the LazyList to
        // receive overscroll events
        overscrollEffect = overscrollWithoutVisualEffect,
    )
}
Jetpack Compose beyond MaterialFree components, screens and templates for apps that don’t look like Google’s. Copy them into your app, or let your coding agent add them.Browse for free

Content updated: