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 die VerticalList ähnlich wie eine Compose LazyColumn. Es werden nur sichtbare Elemente zusammengesetzt und angeordnet, um eine hohe Leistung zu gewährleisten. Vertikale Listen in Jetpack Compose 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 Nutzer eines Mobilgeräts jederzeit auf eine beliebige Koordinate auf dem Bildschirm tippen kann, kann ein Nutzer mit einer Displaybrille nur mit dem Element interagieren, auf das der Fokus gerichtet ist.

Fokusverhalten und untergeordnete Elemente

Vertikale Listen sind für die automatische Verarbeitung der fokusbasierten Navigation optimiert. Im Gegensatz zu Listen für Mobilgeräte, bei denen Fokus und Scrollen oft getrennt sind, werden diese beiden Funktionen in einer vertikalen Liste koordiniert. Der Fokus wird durch die untergeordneten Elemente bewegt, während der Nutzer mit dem Touchpad scrollt. Die Liste selbst ist nicht fokussierbar. Sie verwaltet und fordert den Fokus für ihre untergeordneten Elemente an, damit der Nutzer beim Scrollen einen klaren Interaktionspunkt hat.

Da es keine direkte Touch-Eingabe gibt, müssen alle untergeordneten Elemente, die Sie in einer vertikalen Liste platzieren, fokussierbar sein. Außerdem muss eine visuelle Reaktion erfolgen, wenn der Fokus auf die Elemente gerichtet ist, 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 in Ihren vertikalen Listen, da diese Komponenten bereits fokussierbar sind und visuelles Feedback für Fokus status liefern.

Beispiel: Vertikale Liste mit mehreren Elementen

Im folgenden Code wird gezeigt, wie Sie mit den DSL-Methoden `item` und `items` eine vertikale Liste mit Elementen erstellen:

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

Beispiel: Vertikale Liste mit einem Titelfeld

Jetpack Compose Glimmer bietet auch eine Überladung der vertikalen Liste, die ein Titelfeld enthält. 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 vertikale Liste mit einem Titelfeld erstellt:

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

Listenstatus für programmatische Listenaktionen verwenden

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

Sie können diesen Status anheben mit rememberListState um programmatisch mit scrollToItem und animateScrollToItem zu scrollen.