Listes dans Jetpack Compose Glimmer

Appareils XR concernés
Ces conseils vous aident à créer des expériences pour ces types d'appareils XR.
En savoir plus sur les types d'appareils XR →
Lunettes Display
En savoir plus sur les types d'appareils XR →

Dans Jetpack Compose Glimmer, GlimmerLazyColumn fonctionne de la même manière qu'un LazyColumn Compose en composant et en mettant en page uniquement les éléments visibles pour maintenir des performances élevées. Toutefois, les colonnes différées Glimmer sont conçues pour afficher les commandes des lunettes, où l'utilisateur interagit à l'aide d'un pavé tactile plutôt que d'un écran tactile. Alors qu'un utilisateur mobile peut appuyer sur n'importe quelle coordonnée à l'écran à tout moment, un utilisateur portant des lunettes d'affichage ne peut interagir qu'avec l'élément sélectionné.

Figure 1. Exemple de différents styles de listes dans Jetpack Compose Glimmer.

Comportement de mise au point et éléments enfants

Les colonnes à chargement différé Glimmer gèrent automatiquement la navigation basée sur la sélection. Contrairement aux listes pour appareils mobiles où la sélection et le défilement sont souvent séparés, une colonne Lazy Glimmer coordonne les deux en déplaçant la sélection dans ses éléments enfants lorsque l'utilisateur fait défiler la page avec le pavé tactile. La liste elle-même n'est pas focusable. Elle gère donc la mise au point et la demande pour ses enfants afin que l'utilisateur dispose d'un point d'interaction clair lors du défilement.

Comme il n'y a pas de saisie tactile directe, rendez tous les éléments enfants à l'intérieur d'une colonne à chargement différé Glimmer focusables. Lorsque des éléments sont sélectionnés, fournissez également une réponse visuelle, telle qu'une bordure active ou une mise en surbrillance. Les utilisateurs peuvent toujours faire défiler les éléments non sélectionnables, mais ils ne peuvent pas interagir avec eux. Utilisez des composants intégrés tels que ListItem ou Card autant que possible, car ces composants sont déjà sélectionnables et fournissent un retour visuel pour les états de sélection.

Exemple : colonnes différées Glimmer avec plusieurs éléments

Le code suivant montre comment utiliser une colonne lazy Glimmer avec les méthodes DSL item et items pour créer une liste d'éléments :

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

Exemple : Colonnes différées Glimmer avec un emplacement de titre

Jetpack Compose Glimmer fournit également une surcharge de GlimmerLazyColumn qui contient un emplacement de titre. Le titre non focusable, généralement un TitleChip, reste statique en haut au centre, tandis que le contenu de la liste défile en dessous.

Le code suivant crée une colonne différée Glimmer avec un emplacement de titre :

@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) } }
    }
}

Utiliser l'état de la liste différée Glimmer pour les opérations de liste programmatiques

Pour contrôler et observer différents aspects de l'état de la liste, tels que sa position de défilement à l'aide des propriétés firstVisibleItemIndex et firstVisibleItemScrollOffset, utilisez GlimmerLazyListState.

Vous pouvez hisser cet état à l'aide de rememberGlimmerLazyListState pour faire défiler le contenu de manière programmatique à l'aide de scrollToItem et animateScrollToItem.