# scrollAway

## Functions summary

|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/scrollAway.modifier#(androidx.compose.ui.Modifier).scrollAway(androidx.wear.compose.foundation.ScrollInfoProvider,kotlin.Function0)( scrollInfoProvider: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/ScrollInfoProvider, screenStage: () -> https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ScreenStage )` Scroll an item vertically in/out of view based on scroll state provided by a scrolling list. |

## Functions

### Modifier.scrollAway

Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/ScrollAway.kt+function:scrollAway) Added in [1.5.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.5.0)

```
fun Modifier.scrollAway(
    scrollInfoProvider: ScrollInfoProvider,
    screenStage: () -> ScreenStage
): Modifier
```

Scroll an item vertically in/out of view based on scroll state provided by a scrolling list. Typically used to scroll a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimeText.composable#TimeText(androidx.compose.ui.Modifier,androidx.wear.compose.foundation.CurvedModifier,kotlin.Float,androidx.compose.ui.graphics.Color,androidx.wear.compose.material3.TimeSource,androidx.compose.foundation.layout.PaddingValues,kotlin.Function2)` item out of view as the user starts to scroll a vertically scrollable list of items upwards and bring additional items into view.

Example of using ScrollAway directly (in practice, it is recommended to use `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/AppScaffold.composable#AppScaffold(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ScreenScaffold.composable#ScreenScaffold(androidx.wear.compose.foundation.lazy.ScalingLazyListState,kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.foundation.OverscrollEffect,kotlin.Function2)` to provide the correct scroll away behavior by default):

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.ScrollInfoProvider
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.FilledTonalButton
import androidx.wear.compose.material3.ListHeader
import androidx.wear.compose.material3.ListHeaderDefaults
import androidx.wear.compose.material3.ScreenStage
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TimeText
import androidx.wear.compose.material3.curvedText
import androidx.wear.compose.material3.scrollAway
import androidx.wear.compose.material3.timeTextSeparator

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)
        },
    )
}
```

| Parameters |
|---|---|
| `scrollInfoProvider: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/ScrollInfoProvider` | Used as the basis for the scroll-away implementation, based on the state of the scrollable container. See `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/ScrollInfoProvider` methods for creating a ScrollInfoProvider from common lists such as `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/lazy/TransformingLazyColumnState` or `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/lazy/ScalingLazyListState`. |
| `screenStage: () -> https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ScreenStage` | Function that returns the screen stage of the active screen. Scrolled away items are shown when the screen is new, then scrolled away or hidden when scrolling, and finally shown again when idle. |