Vertikale Stacks in Jetpack Compose Glimmer

XR‑Geräte, für die der Leitfaden gilt
Dieser Leitfaden hilft Ihnen dabei, Erlebnisse für die folgenden Arten von XR-Geräten zu entwickeln.
Informationen zu XR‑Gerätetypen
Displaybrillen
Informationen zu XR‑Gerätetypen

In Jetpack Compose Glimmer ist VerticalStack ein verzögertes, vertikal scrollbares Layout, bei dem Elemente in einer visuell überlappenden, dreidimensionalen Sequenz angeordnet werden. Das primäre Element wird im Vordergrund hervorgehoben, während die nachfolgenden Elemente dahinter positioniert werden.

Abbildung 1. Ein Beispiel für verschiedene Stapelstile in Jetpack Compose Glimmer.

Scroll- und Positionierungsverhalten

Da Elemente in Stapeln in einem kompakten, überlappenden Layout angeordnet sind, verhalten sie sich anders als andere Arten von sequenzierten Komponenten wie Listen:

  • Wenn ein Nutzer vertikal scrollt, wird das aktive Vordergrundelement ausgeblendet, sodass das Element direkt darunter in die hervorgehobene Vordergrundposition gleiten kann.
  • Elemente werden nach einer Nutzergeste immer mit einer speziellen Federanimation in die Vordergrundposition animiert.
  • Elemente werden entlang der Z‑Achse positioniert, wobei Elemente weiter unten in der Liste hinter dem primären Element platziert werden.

Fokusverwaltung

VerticalStack verwendet ein spezielles Fokussystem, um sicherzustellen, dass das aktuelle Vordergrundelement immer das primäre Ziel für die Nutzerinteraktion ist:

  • Anfangsfokus und erneuter Fokus: Der Anfangsfokus und der erneute Fokus liegen auf dem aktuellen obersten Element des Stapels.
  • Benachrichtigung zum Autofokus: Wenn Elemente überblenden, fordert der Stapel den Fokus für das oberste Element an.
  • Fokus-Tracking: Jedes Element verwendet onFocusChanged, um StackState über seinen individuellen Fokusstatus zu informieren.

Beispiel: Vertikalen Stapel erstellen

Mit dem folgenden Code wird ein vertikaler Stapel mit einigen Kartenelementen erstellt:

@Composable
fun VerticalStackSample() {
    VerticalStack {
        item {
            Card { Text("Top Card") }
        }
        item {
            Card { Text("Second Card") }
        }
        item {
            Card { Text("Third Card") }
        }
    }
}