StackKt

Added in 1.0.0-alpha09

---

Kotlin |Java

public final class StackKt

---

Summary

Public methods
static final void	@Composable VerticalStack(     @NonNull Modifier modifier,     @NonNull StackState state,     @NonNull Function1<@NonNull StackScope, Unit> content ) VerticalStack is a lazy, vertically scrollable layout that arranges its items in a visually overlapping, three-dimensional sequence, which resembles a deck of cards.

Public methods

VerticalStack

Artifact: androidx.xr.glimmer:glimmer

View Source

@Composable
public static final void VerticalStack(
    @NonNull Modifier modifier,
    @NonNull StackState state,
    @NonNull Function1<@NonNull StackScope, Unit> content
)

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
@NonNull Modifier modifier	the modifier to apply to this layout.
@NonNull StackState state	the state of the stack.
@NonNull Function1<@NonNull StackScope, Unit> content	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.