Start native apps faster with the Composables CLI ->
Compose Modifier

scrollAway

Scroll an item vertically in/out of view based on scroll state provided by a scrolling list.

ScrollAwaySample

@Composable
fun ScrollAwaySample() {
    val state = rememberTransformingLazyColumnState()
    Box(modifier = Modifier.fillMaxSize()) {
        TransformingLazyColumn(state = state, modifier = Modifier.fillMaxSize()) {
            item {
                ListHeader(
                    modifier =
                        Modifier.minimumVerticalContentPadding(
                            ListHeaderDefaults.minimumTopListContentPadding,
                            ListHeaderDefaults.minimumBottomListContentPadding,
                        )
                ) {
                    Text(
                        modifier = Modifier.fillMaxWidth(),
                        text = "TLC",
                        textAlign = TextAlign.Center,
                    )
                }
            }
            items(50) {
                FilledTonalButton(
                    modifier =
                        Modifier.fillMaxWidth()
                            .padding(horizontal = 36.dp)
                            .minimumVerticalContentPadding(
                                ButtonDefaults.minimumVerticalListContentPadding
                            ),
                    onClick = {},
                    label = { Text("Item ${it + 1}") },
                )
            }
        }
        TimeText(
            // In practice, it is recommended to use the [AppScaffold] and [ScreenScaffold],
            // so that the Material3 scroll away behavior is provided by default, rather than using
            // [Modifier.scrollAway] directly.
            modifier =
                Modifier.scrollAway(
                    scrollInfoProvider = ScrollInfoProvider(state),
                    screenStage = {
                        if (state.isScrollInProgress) ScreenStage.Scrolling else ScreenStage.Idle
                    },
                ),
            content = { time ->
                curvedText("List")
                timeTextSeparator()
                curvedText(time)
            },
        )
    }
}

Last updated: