Listen 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 funktioniert GlimmerLazyColumn ähnlich wie Compose LazyColumn. Es werden nur sichtbare Elemente zusammengesetzt und angeordnet, um eine hohe Leistung zu gewährleisten. Lazy Columns in Glimmer sind jedoch für die Steuerung von Displaybrillen konzipiert, bei denen der Nutzer über ein Touchpad und nicht über einen Touchscreen interagiert. Während ein mobiler Nutzer jederzeit auf eine beliebige Koordinate auf dem Bildschirm tippen kann, kann ein Nutzer mit einer Displaybrille nur mit dem Element interagieren, das den Fokus hat.

Fokusverhalten und untergeordnete Elemente

Lazy Columns in Glimmer verarbeiten die fokusbasierte Navigation automatisch. Anders als bei Listen für Mobilgeräte, bei denen Fokus und Scrollen oft getrennt sind, koordiniert eine Lazy Column in Glimmer die beiden Funktionen, indem der Fokus durch die untergeordneten Elemente bewegt wird, während der Nutzer mit dem Touchpad scrollt. Die Liste selbst ist nicht fokussierbar. Daher verwaltet sie den Fokus für ihre untergeordneten Elemente und fordert ihn an, damit der Nutzer beim Scrollen einen klaren Interaktionspunkt hat.

Da es keine direkte Touch-Eingabe gibt, müssen alle untergeordneten Elemente in einer Lazy Column in Glimmer fokussierbar sein. Wenn Elemente den Fokus haben, sollte auch eine visuelle Reaktion erfolgen, z. B. ein aktiver Rahmen oder eine Hervorhebung. Nutzer können zwar an nicht fokussierbaren Elementen vorbeiscrollen, aber nicht mit ihnen interagieren. Verwenden Sie nach Möglichkeit integrierte Komponenten wie ListItem oder Card, da diese Komponenten bereits fokussierbar sind und visuelles Feedback für Fokus status bieten.

Beispiel: Lazy Columns in Glimmer mit mehreren Elementen

Im folgenden Code wird gezeigt, wie Sie eine Lazy Column in Glimmer mit den DSL-Methoden „item“ und „items“ verwenden, um eine Liste von Elementen zu erstellen:

@Composable
fun GlimmerLazyColumnSample() {
    GlimmerLazyColumn {
        item { ListItem { Text("Header") } }
        items(count = 10) { index -> ListItem { Text("Item-$index") } }
        item { ListItem { Text("Footer") } }
    }
}
GlimmerLazyColumnSamples.kt

Beispiel: Lazy Columns in Glimmer mit einem Titelfeld

Jetpack Compose Glimmer bietet auch eine Überladung von GlimmerLazyColumn mit einem Titelfeld. Der nicht fokussierbare Titel, in der Regel ein TitleChip, bleibt oben in der Mitte statisch, während der Listeninhalt darunter scrollt.

Mit dem folgenden Code wird eine Lazy Column in Glimmer mit einem Titelfeld erstellt:

@Composable
fun GlimmerLazyColumnWithTitleChipSample() {
    val ingredientItems =
        listOf("Milk", "Flour", "Egg", "Salt", "Apples", "Butter", "Vanilla", "Sugar", "Cinnamon")
    GlimmerLazyColumn(title = { TitleChip { Text("Ingredients") } }) {
        items(ingredientItems) { text -> ListItem { Text(text) } }
    }
}
GlimmerLazyColumnSamples.kt

Lazy List-Status in Glimmer für programmatische Listenaktionen verwenden

Mit GlimmerLazyListState können Sie verschiedene Aspekte des Listenstatus steuern und beobachten, z. B. die Scrollposition mit den Eigenschaften firstVisibleItemIndex und firstVisibleItemScrollOffset.

Sie können diesen Status hochstufen mit rememberGlimmerLazyListState, um mit scrollToItem und animateScrollToItem programmatisch zu scrollen.