# androidx.xr.glimmer.stack

*** ** * ** ***

Kotlin \|[Java](https://developer.android.com/reference/androidx/xr/glimmer/stack/package-summary "View this page in Java")

## Interfaces

|---|---|
| `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/StackItemScope` | Receiver scope used by item content in `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/package-summary#VerticalStack(androidx.compose.ui.Modifier,androidx.xr.glimmer.stack.StackState,kotlin.Function1)`. |
| `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/StackScope` | Receiver scope used by `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/package-summary#VerticalStack(androidx.compose.ui.Modifier,androidx.xr.glimmer.stack.StackState,kotlin.Function1)` that defines a DSL for adding items to the stack. |

## Classes

|---|---|
| `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/StackState` | The `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/package-summary#VerticalStack(androidx.compose.ui.Modifier,androidx.xr.glimmer.stack.StackState,kotlin.Function1)` state that allows programmatic control and observation of the stack's state. |

## Top-level functions summary

|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/package-summary#VerticalStack(androidx.compose.ui.Modifier,androidx.xr.glimmer.stack.StackState,kotlin.Function1)(modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, state: https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/StackState, content: https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/StackScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/package-summary#VerticalStack(androidx.compose.ui.Modifier,androidx.xr.glimmer.stack.StackState,kotlin.Function1)` is a lazy scrollable layout that displays its children in a form of a stack where the item on top of the stack is prominently displayed. |
| `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/StackState` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/package-summary#rememberStackState(kotlin.Int)(initialTopItem: @https://developer.android.com/reference/kotlin/androidx/annotation/IntRange(from = 0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html)` Creates and remembers a `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/StackState` for a `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/package-summary#VerticalStack(androidx.compose.ui.Modifier,androidx.xr.glimmer.stack.StackState,kotlin.Function1)`. |

## Extension functions summary

|---|---|
| `inline https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `<T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/StackScope.https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/package-summary#(androidx.xr.glimmer.stack.StackScope).items(kotlin.collections.List,kotlin.Function1,kotlin.Function2)( items: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-list/index.html<T>, noinline key: ((item) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html)?, crossinline itemContent: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/StackItemScope.(item) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Adds a list of items. |

## Top-level functions

### VerticalStack

Artifact: [androidx.xr.glimmer:glimmer](https://developer.android.com/jetpack/androidx/releases/xr-glimmer) [View Source](https://cs.android.com/search?q=file:androidx/xr/glimmer/stack/Stack.kt+function:VerticalStack)

```
@Composable
fun VerticalStack(
    modifier: Modifier = Modifier,
    state: StackState = rememberStackState(),
    content: StackScope.() -> Unit
): Unit
```

`https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/package-summary#VerticalStack(androidx.compose.ui.Modifier,androidx.xr.glimmer.stack.StackState,kotlin.Function1)` is a lazy scrollable layout that displays its children in a form of a stack where the item on top of the stack is prominently displayed. `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/package-summary#VerticalStack(androidx.compose.ui.Modifier,androidx.xr.glimmer.stack.StackState,kotlin.Function1)` implements the item traversal in a vertical direction.

Note: When displaying text within a `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/package-summary#VerticalStack(androidx.compose.ui.Modifier,androidx.xr.glimmer.stack.StackState,kotlin.Function1)`, it is strongly recommended to set `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/TextStyle#textMotion()` to `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/TextMotion#Animated()`. This ensures smooth rendering during layout animations or scaling transitions, preventing pixel-snapping artifacts.

```kotlin
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextMotion
import androidx.compose.ui.unit.dp
import androidx.xr.glimmer.Card
import androidx.xr.glimmer.CardDefaults
import androidx.xr.glimmer.LocalTextStyle
import androidx.xr.glimmer.Text
import androidx.xr.glimmer.stack.VerticalStack

VerticalStack(modifier = Modifier.fillMaxWidth().height(364.dp)) {
    item(key = 0) {
        Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
            Text(
                "Item-0",
                style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
            )
        }
    }
    items(count = 10, key = { it + 1 }) { index ->
        Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
            Text(
                "Item-${index + 1}",
                style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
            )
        }
    }
}
```

| Parameters |
|---|---|
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the modifier to apply to this layout. |
| `state: https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/StackState = rememberStackState()` | the state of the stack. |
| `content: https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/StackScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | a block that describes the content. Inside this block you can use methods like `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/StackScope#item(kotlin.Any,kotlin.Function1)` to add a single item or `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/StackScope#items(kotlin.Int,kotlin.Function1,kotlin.Function2)` to add a collection of items. |

### rememberStackState

Artifact: [androidx.xr.glimmer:glimmer](https://developer.android.com/jetpack/androidx/releases/xr-glimmer) [View Source](https://cs.android.com/search?q=file:androidx/xr/glimmer/stack/StackState.kt+function:rememberStackState) Added in [1.0.0-alpha08](https://developer.android.com/jetpack/androidx/releases/xr-glimmer#1.0.0-alpha08)

```
@Composable
fun rememberStackState(initialTopItem: @IntRange(from = 0) Int = 0): StackState
```

Creates and remembers a `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/StackState` for a `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/package-summary#VerticalStack(androidx.compose.ui.Modifier,androidx.xr.glimmer.stack.StackState,kotlin.Function1)`.

The returned `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/StackState` is remembered across compositions and can be used to control or observe the state of a `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/package-summary#VerticalStack(androidx.compose.ui.Modifier,androidx.xr.glimmer.stack.StackState,kotlin.Function1)`. It's essential to pass this state to the `state` parameter of the corresponding `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/package-summary#VerticalStack(androidx.compose.ui.Modifier,androidx.xr.glimmer.stack.StackState,kotlin.Function1)` composable.

Note: Properties of the state will only be correctly populated after the `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/package-summary#VerticalStack(androidx.compose.ui.Modifier,androidx.xr.glimmer.stack.StackState,kotlin.Function1)` it is associated with has been composed for the first time.

Warning: A single `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/StackState` instance must not be shared across multiple `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/package-summary#VerticalStack(androidx.compose.ui.Modifier,androidx.xr.glimmer.stack.StackState,kotlin.Function1)` composables.

| Parameters |
|---|---|
| `initialTopItem: @https://developer.android.com/reference/kotlin/androidx/annotation/IntRange(from = 0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = 0` | The index of the item to show at the top of the stack initially. Must be non-negative. Defaults to 0. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/StackState` |   |
| `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/package-summary#VerticalStack(androidx.compose.ui.Modifier,androidx.xr.glimmer.stack.StackState,kotlin.Function1)` |   |

## Extension functions

### items

Artifact: [androidx.xr.glimmer:glimmer](https://developer.android.com/jetpack/androidx/releases/xr-glimmer) [View Source](https://cs.android.com/search?q=file:androidx/xr/glimmer/stack/StackScope.kt+function:items)

```
inline fun <T : Any?> StackScope.items(
    items: List<T>,
    noinline key: ((item) -> Any)? = null,
    crossinline itemContent: @Composable StackItemScope.(item) -> Unit
): Unit
```

Adds a list of items.

| Parameters |
|---|---|
| `items: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-list/index.html<T>` | the list of item data |
| `noinline key: ((item) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html)? = null` | a factory of stable and unique keys representing the items. If a key is specified, the scroll position will be maintained based on the key. If items are added/removed before the current visible item, the item with the given key will be kept as the first visible one. If null is passed, the position in the stack will represent the key. |
| `crossinline itemContent: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/StackItemScope.(item) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the content displayed by a single item |