VerticalStack

Functions summary

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

VerticalStack 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

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

VerticalStack 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 VerticalStack, it is strongly recommended to set androidx.compose.ui.text.TextStyle.textMotion to androidx.compose.ui.text.style.TextMotion.Animated. This ensures smooth rendering during layout animations or scaling transitions, preventing pixel-snapping artifacts.

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: Modifier = Modifier

the modifier to apply to this layout.
state: StackState = rememberStackState()

the state of the stack.
content: StackScope.() -> Unit

a block that describes the content. Inside this block you can use methods like StackScope.item to add a single item or StackScope.items to add a collection of items.