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 IA
En savoir plus sur les types d'appareils XR

Dans Jetpack Compose Glimmer, les listes sont des composants d'UI à défilement vertical qui n'affichent efficacement que les éléments visibles. Elles sont conçues pour fournir des comportements spécifiques et une compatibilité d'entrée pour les applications de lunettes IA. Jetpack Compose Glimmer y parvient à l'aide des composants VerticalList et ListItem.

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

VerticalList est le composant de Jetpack Compose Glimmer permettant d'afficher du contenu vertical défilable. Il offre les mêmes fonctionnalités d'API que LazyColumn, mais avec des comportements spécifiquement optimisés pour Jetpack Compose, Glimmer et les lunettes d'IA avec écran.

Les listes Glimmer de Jetpack Compose présentent quelques contraintes uniques :

  • Les listes ne doivent afficher que trois éléments ou moins dans une même vue.
  • Lorsqu'une liste contient plus d'éléments que ne peut en afficher une vue, un scrim noir est utilisé près des limites de la liste.

Exemple : Afficher une liste verticale de trois éléments

Le code suivant montre comment utiliser les composants VerticalList et ListItem pour créer une liste de trois éléments :

@Composable
fun GlimmerListWithButtons() {
    VerticalList(
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(20.dp)
    ) {
        items(count = 3) { index ->
            ListItem(
                onClick = { /* Handle Click */ },
                leadingIcon = if (index == 1) {
                    { Icon(Icons.Rounded.Favorite, "Favorite Icon") }
                } else null
            ) {
                Text("List Item + $index")
            }
        }
    }
}

Points clés concernant le code

  • La liste affiche trois éléments générés dynamiquement, chacun étant un ListItem.
  • Chaque ListItem peut être personnalisé et une icône peut y être ajoutée.