Configure touch scrolling and flinging for the UI element in a single [Orientation].
@Composable
fun ScrollableSample() {
// actual composable state that we will show on UI and update in `Scrollable`
var offset by remember { mutableStateOf(0f) }
Box(
Modifier.size(150.dp)
.scrollable(
orientation = Orientation.Vertical,
// state for Scrollable, describes how consume scroll amount
state =
rememberScrollableState { delta ->
// use the scroll data and indicate how much this element consumed.
// unconsumed deltas will be propagated to nested scrollables (if present)
offset = offset + 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(offset.roundToInt().toString(), style = TextStyle(fontSize = 32.sp))
}
}