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 disposés 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 de la vue, ce qui permet à l'élément situé juste en dessous de glisser vers la position de premier plan.
  • 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 focus spécialisé pour s'assurer que l'élément de premier plan actuel est toujours la cible principale de l'interaction utilisateur :

  • Focus initial et retour au focus : le focus initial et le retour au focus 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 plusieurs éléments :

@Composable
fun VerticalStackSample() {
    VerticalStack(modifier = Modifier.fillMaxWidth().height(364.dp)) {
        item(key = 0) {
            Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-0",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
        }
        items(count = 10, key = { it + 1 }) { index ->
            Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-${index + 1}",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
        }
    }
}

Points essentiels concernant le code

  • Définit textMotion pour le LocalTextStyle du texte sur Animated. Cela favorise un rendu de texte fluide lors des animations de mise en page ou des transitions de mise à l'échelle pour éviter les artefacts de pixelisation.
  • Fournit une taille spécifique de 364.dp pour la hauteur de la pile verticale. Fournissez toujours une hauteur spécifique, utilisez un modificateur de hauteur ou appliquez le fillMaxSize modificateur pour définir la zone visuelle des transitions de carte.
  • Contrairement à d'autres composants qui prennent directement un paramètre de forme, VerticalStack gère les limites visuelles de ses éléments à l'aide du itemDecoration modificateur. Cet exemple transmet la même forme pour le itemDecoration de l'élément initial que tous les éléments enfants afin de maintenir un écrêtage et des effets visuels cohérents. Cet exemple utilise le par défaut CardDefaults.shape.