Piles verticales 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 d'affichage
En savoir plus sur les types d'appareils XR →

Dans Jetpack Compose Glimmer, VerticalStack est une mise en page paresseuse à défilement vertical qui organise les éléments dans une séquence tridimensionnelle visuellement superposée. L'élément principal est mis en évidence au premier plan, tandis que les éléments suivants sont placés derrière lui.

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

Comportements de défilement et de positionnement

Étant donné que les piles conservent les éléments dans une mise en page compacte et superposée, elles présentent des comportements différents des autres types de composants séquencés, tels que les listes :

  • Lorsqu'un utilisateur fait défiler l'écran verticalement, l'élément actif au premier plan disparaît, ce qui permet à l'élément situé juste en dessous de glisser vers la position de premier plan mise en évidence.
  • Les éléments sont toujours animés à l'aide d'une animation de rétroaction spécialisée dans la position de premier plan une fois le geste de l'utilisateur terminé.
  • Les éléments sont positionnés le long de l'axe Z, les éléments plus loin dans la liste étant placés derrière l'élément principal.

Gestion du ciblage

VerticalStack utilise un système de ciblage spécialisé pour s'assurer que l'élément de premier plan actuel est toujours la cible principale de l'interaction utilisateur :

  • Ciblage initial et retour au ciblage : le ciblage initial et le retour au ciblage sont effectués sur l' élément supérieur actuel de la pile.
  • Notification de ciblage automatique : lors de la transition des éléments, la pile demande le ciblage de l'élément supérieur.
  • Suivi du ciblage : chaque élément utilise onFocusChanged pour notifier StackState de son état de ciblage individuel.

Exemple : Créer une pile verticale

Le code suivant crée une pile verticale avec quelques éléments de carte :

@Composable
fun VerticalStackSample() {
    VerticalStack {
        item {
            Card { Text("Top Card") }
        }
        item {
            Card { Text("Second Card") }
        }
        item {
            Card { Text("Third Card") }
        }
    }
}