Compose Modifier

scrollable

Configure touch scrolling and flinging for the UI element in a single [Orientation].

ScrollableSample

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