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, VerticalList 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, pour Jetpack Compose Glimmer, les listes verticales sont conçues pour 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 listes verticales sont optimisées pour gérer automatiquement la navigation basée sur la sélection. Contrairement aux listes pour appareils mobiles où le focus et le défilement sont souvent séparés, une liste verticale orchestre les deux en déplaçant le focus 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 sélectionnable. Elle gère et demande donc la sélection de 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 que vous placez dans une liste verticale sélectionnables et fournissez une réponse visuelle lorsque les éléments sont sélectionnés, comme 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 dans vos listes verticales chaque fois que possible, car ces composants sont déjà sélectionnables et fournissent un retour visuel pour les états de sélection.

Exemple : Liste verticale avec plusieurs éléments

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

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

Exemple : Liste verticale avec un emplacement pour le titre

Jetpack Compose Glimmer fournit également une surcharge de liste verticale qui contient un emplacement de titre. Le titre non sélectionnable (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 liste verticale avec un emplacement de titre :

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

Utiliser l'état de la liste pour les opérations de liste programmatiques

Utilisez ListState 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.

Vous pouvez hisser cet état à l'aide de rememberListState pour faire défiler la page de manière programmatique à l'aide de scrollToItem et animateScrollToItem.