Compose Modifier

scrollable2D

Configure touch scrolling and flinging for the UI element in both XY orientations.

Scrollable2DSample

@Sampled
@Composable
fun Scrollable2DSample() {
    // actual composable state that we will show on UI and update in `Scrollable`
    val offset = remember { mutableStateOf(Offset.Zero) }
    Box(
        Modifier.size(150.dp)
            .scrollable2D(
                // state for Scrollable, describes how to consume scroll amount
                state =
                    rememberScrollable2DState { delta ->
                        // use the scroll data and indicate how much this element consumed.
                        // unconsumed deltas will be propagated to nested scrollables (if present)
                        offset.value = offset.value + delta // update the state
                        delta // indicate that we consumed all the pixels available
                    }
            )
            .background(Color.LightGray),
        contentAlignment = Alignment.Center,
    ) {
        // Modifier.scrollable is not opinionated about its children's layouts. It will however
        // promote nested scrolling capabilities if those children also use the modifier.
        // The modifier will not change any layouts so one must handle any desired changes through
        // the delta values in the scrollable state
        Text(
            "X=${offset.value.x.roundToInt()} Y=${offset.value.y.roundToInt()}",
            style = TextStyle(fontSize = 32.sp),
        )
    }
}
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: