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

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.

Scroll- und Positionierungsverhalten

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

• Wenn ein Nutzer vertikal scrollt, wird das aktive Element im Vordergrund 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 Element im Vordergrund immer das primäre Ziel für die Nutzerinteraktion ist:

• Anfangsfokus und erneuter Fokus: Der Anfangsfokus und der erneute Fokus wird auf das aktuelle oberste Element des Stapels gesetzt.
• Benachrichtigung zum Autofokus: Wenn Elemente übergehen, 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 mehreren Elementen erstellt:

@Composable
fun VerticalStackSample() {
    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),
                )
            }
        }
    }
}
StackSamples.kt

Wichtige Punkte zum Code

• Legt textMotion für LocalTextStyle des Texts auf Animated fest. Dadurch wird eine reibungslose Textwiedergabe bei Layoutanimationen oder Skalierungsübergängen gefördert, um Artefakte durch Pixel-Snapping zu vermeiden.
• Gibt eine bestimmte Größe von 364.dp für die Höhe des vertikalen Stapels an. Geben Sie immer eine bestimmte Höhe an, verwenden Sie einen Höhenmodifikator oder wenden Sie den fillMaxSize Modifikator an, um den visuellen Bereich für Kartenübergänge zu definieren.
• Im Gegensatz zu anderen Komponenten, die einen Formparameter direkt verwenden, VerticalStack verwaltet die visuellen Grenzen seiner Elemente mit dem itemDecoration Modifikator. In diesem Beispiel wird für itemDecoration des ersten Elements dieselbe Form wie für alle untergeordneten Elemente übergeben, um ein einheitliches Clipping und visuelle Effekte zu erzielen. In diesem Beispiel wird die Standardform CardDefaults.shape verwendet.