# ScalingLazyColumn

## Functions summary

|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable [ScalingLazyColumn](https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ScalingLazyColumn.composable#ScalingLazyColumn(androidx.compose.ui.Modifier,androidx.wear.compose.material.ScalingLazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.wear.compose.material.ScalingParams,androidx.wear.compose.material.ScalingLazyListAnchorType,androidx.wear.compose.material.AutoCenteringParams,kotlin.Function1))( modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, state: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ScalingLazyListState, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, reverseLayout: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, verticalArrangement: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Vertical, horizontalAlignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Horizontal, flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior, userScrollEnabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, scalingParams: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ScalingParams, anchorType: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ScalingLazyListAnchorType, autoCentering: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/AutoCenteringParams?, content: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ScalingLazyListScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` **This function is deprecated.** Was moved to androidx.wear.compose.foundation.lazy package. |

## Functions

### ScalingLazyColumn

Artifact: [androidx.wear.compose:compose-material](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material/ScalingLazyColumn.kt+function:ScalingLazyColumn)

```
@Composable
fun [ScalingLazyColumn](https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ScalingLazyColumn.composable#ScalingLazyColumn(androidx.compose.ui.Modifier,androidx.wear.compose.material.ScalingLazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.wear.compose.material.ScalingParams,androidx.wear.compose.material.ScalingLazyListAnchorType,androidx.wear.compose.material.AutoCenteringParams,kotlin.Function1))(
    modifier: Modifier = Modifier,
    state: ScalingLazyListState = rememberScalingLazyListState(),
    contentPadding: PaddingValues = PaddingValues(horizontal = 10.dp),
    reverseLayout: Boolean = false,
    verticalArrangement: Arrangement.Vertical = Arrangement.spacedBy(
            space = 4.dp,
            alignment = if (!reverseLayout) Alignment.Top else Alignment.Bottom,
        ),
    horizontalAlignment: Alignment.Horizontal = Alignment.CenterHorizontally,
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
    userScrollEnabled: Boolean = true,
    scalingParams: ScalingParams = ScalingLazyColumnDefaults.scalingParams(),
    anchorType: ScalingLazyListAnchorType = ScalingLazyListAnchorType.ItemCenter,
    autoCentering: AutoCenteringParams? = AutoCenteringParams(),
    content: ScalingLazyListScope.() -> Unit
): Unit
```

> [!CAUTION]
> **This function is deprecated.**   
> Was moved to androidx.wear.compose.foundation.lazy package. Please use it instead

A scrolling scaling/fisheye list component that forms a key part of the Wear Material Design language. Provides scaling and transparency effects to the content items.

`https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ScalingLazyColumn.composable#ScalingLazyColumn(androidx.compose.ui.Modifier,androidx.wear.compose.material.ScalingLazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.wear.compose.material.ScalingParams,androidx.wear.compose.material.ScalingLazyListAnchorType,androidx.wear.compose.material.AutoCenteringParams,kotlin.Function1)` is designed to be able to handle potentially large numbers of content items. Content items are only materialized and composed when needed.

If scaling/fisheye functionality is not required then a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyColumn.composable#LazyColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow,kotlin.Function1)` should be considered instead to avoid any overhead of measuring and calculating scaling and transparency effects for the content items.

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ScalingLazyColumn.composable#ScalingLazyColumn(androidx.compose.ui.Modifier,androidx.wear.compose.material.ScalingLazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.wear.compose.material.ScalingParams,androidx.wear.compose.material.ScalingLazyListAnchorType,androidx.wear.compose.material.AutoCenteringParams,kotlin.Function1)` with default parameters:

```kotlin
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.ui.Modifier
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.ListHeader
import androidx.wear.compose.material.Text

ScalingLazyColumn(modifier = Modifier.fillMaxWidth()) {
    item { ListHeader { Text(text = "List Header") } }
    items(20) {
        Chip(
            onClick = {},
            label = { Text("List item $it") },
            colors = ChipDefaults.secondaryChipColors(),
        )
    }
}
```

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ScalingLazyColumn.composable#ScalingLazyColumn(androidx.compose.ui.Modifier,androidx.wear.compose.material.ScalingLazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.wear.compose.material.ScalingParams,androidx.wear.compose.material.ScalingLazyListAnchorType,androidx.wear.compose.material.AutoCenteringParams,kotlin.Function1)` using `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ScalingLazyListAnchorType#ItemStart()` anchoring, in this configuration the edge of list items is aligned to the center of the screen. Also this example shows scrolling to a clicked list item with `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ScalingLazyListState#animateScrollToItem(kotlin.Int,kotlin.Int)`:

```kotlin
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.AutoCenteringParams
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.ScalingLazyListAnchorType
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.ListHeader
import androidx.wear.compose.material.Text

val coroutineScope = rememberCoroutineScope()
val itemSpacing = 6.dp
// Line up the gap between the items on the center-line
val scrollOffset = with(LocalDensity.current) { -(itemSpacing / 2).roundToPx() }
val state =
    rememberScalingLazyListState(
        initialCenterItemIndex = 1,
        initialCenterItemScrollOffset = scrollOffset,
    )

ScalingLazyColumn(
    modifier = Modifier.fillMaxWidth(),
    anchorType = ScalingLazyListAnchorType.ItemStart,
    verticalArrangement = Arrangement.spacedBy(itemSpacing),
    state = state,
    autoCentering = AutoCenteringParams(itemOffset = scrollOffset),
) {
    item { ListHeader { Text(text = "List Header") } }
    items(20) {
        Chip(
            onClick = {
                coroutineScope.launch {
                    // Add +1 to allow for the ListHeader
                    state.animateScrollToItem(it + 1, scrollOffset)
                }
            },
            label = { Text("List item $it") },
            colors = ChipDefaults.secondaryChipColors(),
        )
    }
}
```

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ScalingLazyColumn.composable#ScalingLazyColumn(androidx.compose.ui.Modifier,androidx.wear.compose.material.ScalingLazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.wear.compose.material.ScalingParams,androidx.wear.compose.material.ScalingLazyListAnchorType,androidx.wear.compose.material.AutoCenteringParams,kotlin.Function1)` with snap of items to the viewport center:

```kotlin
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.ui.Modifier
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.ScalingLazyColumnDefaults
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.ListHeader
import androidx.wear.compose.material.Text

val state = rememberScalingLazyListState()
ScalingLazyColumn(
    modifier = Modifier.fillMaxWidth(),
    state = state,
    flingBehavior = ScalingLazyColumnDefaults.snapFlingBehavior(state = state),
) {
    item { ListHeader { Text(text = "List Header") } }
    items(20) {
        Chip(
            onClick = {},
            label = { Text("List item $it") },
            colors = ChipDefaults.secondaryChipColors(),
        )
    }
}
```

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ScalingLazyColumn.composable#ScalingLazyColumn(androidx.compose.ui.Modifier,androidx.wear.compose.material.ScalingLazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.wear.compose.material.ScalingParams,androidx.wear.compose.material.ScalingLazyListAnchorType,androidx.wear.compose.material.AutoCenteringParams,kotlin.Function1)` where `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#ScalingLazyColumn(androidx.compose.ui.Modifier,androidx.wear.compose.material.ScalingLazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.wear.compose.material.ScalingParams,androidx.wear.compose.material.ScalingLazyListAnchorType,androidx.wear.compose.material.AutoCenteringParams,kotlin.Function1)` has been disabled and explicit `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#ScalingLazyColumn(androidx.compose.ui.Modifier,androidx.wear.compose.material.ScalingLazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.wear.compose.material.ScalingParams,androidx.wear.compose.material.ScalingLazyListAnchorType,androidx.wear.compose.material.AutoCenteringParams,kotlin.Function1)` provided to ensure there is space above the first and below the last list item to allow them to be scrolled into view on circular screens:

```kotlin
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.ListHeader
import androidx.wear.compose.material.Text

ScalingLazyColumn(
    modifier = Modifier.fillMaxWidth(),
    contentPadding = PaddingValues(top = 20.dp, bottom = 20.dp),
    autoCentering = null,
) {
    item { ListHeader { Text(text = "List Header") } }
    items(20) {
        Chip(
            onClick = {},
            label = { Text("List item $it") },
            colors = ChipDefaults.secondaryChipColors(),
        )
    }
}
```

For more information, see the [Lists](https://developer.android.com/training/wearables/components/lists) guide.

| Parameters |
|---|---|
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | The modifier to be applied to the component |
| `state: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ScalingLazyListState = rememberScalingLazyListState()` | The state of the component |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = PaddingValues(horizontal = 10.dp)` | The padding to apply around the contents |
| `reverseLayout: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | reverse the direction of scrolling and layout, when `true` items will be composed from the bottom to the top |
| `verticalArrangement: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Vertical = Arrangement.spacedBy( space = 4.dp, alignment = if (!reverseLayout) Alignment.Top else Alignment.Bottom, )` | The vertical arrangement of the layout's children. This allows us to add spacing between items and specify the arrangement of the items when we have not enough of them to fill the whole minimum size |
| `horizontalAlignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Horizontal = Alignment.CenterHorizontally` | the horizontal alignment applied to the items |
| `flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior = ScrollableDefaults.flingBehavior()` | Logic describing fling behavior. If snapping is required use `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ScalingLazyColumnDefaults#snapFlingBehavior(androidx.wear.compose.material.ScalingLazyListState,androidx.compose.ui.unit.Dp,androidx.compose.animation.core.DecayAnimationSpec)`. |
| `userScrollEnabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether the scrolling via the user gestures or accessibility actions is allowed. You can still scroll programmatically using the state even when it is disabled. |
| `scalingParams: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ScalingParams = ScalingLazyColumnDefaults.scalingParams()` | The parameters to configure the scaling and transparency effects for the component |
| `anchorType: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ScalingLazyListAnchorType = ScalingLazyListAnchorType.ItemCenter` | How to anchor list items to the center-line of the viewport |
| `autoCentering: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/AutoCenteringParams? = AutoCenteringParams()` | AutoCenteringParams parameter to control whether space/padding should be automatically added to make sure that list items can be scrolled into the center of the viewport (based on their `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#ScalingLazyColumn(androidx.compose.ui.Modifier,androidx.wear.compose.material.ScalingLazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.wear.compose.material.ScalingParams,androidx.wear.compose.material.ScalingLazyListAnchorType,androidx.wear.compose.material.AutoCenteringParams,kotlin.Function1)`). If non-null then space will be added before the first list item, if needed, to ensure that items with indexes greater than or equal to the itemIndex (offset by itemOffset pixels) will be able to be scrolled to the center of the viewport. Similarly space will be added at the end of the list to ensure that items can be scrolled up to the center. If null no automatic space will be added and instead the developer can use `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#ScalingLazyColumn(androidx.compose.ui.Modifier,androidx.wear.compose.material.ScalingLazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.wear.compose.material.ScalingParams,androidx.wear.compose.material.ScalingLazyListAnchorType,androidx.wear.compose.material.AutoCenteringParams,kotlin.Function1)` to manually arrange the items. |