Compose Modifier

scrollable

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

ScrollableSample

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