Configure touch scrolling and flinging for the UI element in both XY orientations.
@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),
)
}
}