Compose Modifier

scrollable2D

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

Scrollable2DSample

@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),
        )
    }
}