# VerticalStack

## 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/VerticalStack.composable#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/VerticalStack.composable#VerticalStack(androidx.compose.ui.Modifier,androidx.xr.glimmer.stack.StackState,kotlin.Function1)` is a lazy, vertically scrollable layout that arranges its items in a visually overlapping, three-dimensional sequence, which resembles a deck of cards. |

## 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/VerticalStack.composable#VerticalStack(androidx.compose.ui.Modifier,androidx.xr.glimmer.stack.StackState,kotlin.Function1)` is a lazy, vertically scrollable layout that arranges its items in a visually overlapping, three-dimensional sequence, which resembles a deck of cards. The primary item is prominently displayed in the foreground. Subsequent items are positioned behind the primary item along the z-axis with a small portion of the next item revealed to indicate depth and upcoming content.

As the user scrolls vertically, the active foreground item transitions out of view, allowing the item immediately beneath it to slide into the prominent foreground position. Items always snap-animate into the foreground position after the user's gesture ends.

Note: When displaying text within a `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/stack/VerticalStack.composable#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. |