Comprendre les phases de défilement

Le défilement est divisé en plusieurs phases. Le delta d'entrée est distribué par le biais d'une séquence de phases pour s'assurer que chaque phase a la possibilité de consommer ou de réagir au mouvement.

Tout au long de ce cycle, le delta d'entrée disponible et le delta d'entrée consommé sont transmis à chaque étape. Chaque phase dispose ainsi du contexte complet nécessaire pour réagir à l'événement de défilement, le consommer ou l'écouter.

Comme l'illustre la figure 1, le processus de défilement suit exactement cet ordre :

1. Dépassement de défilement : reçoit d'abord le delta d'entrée initial, ce qui donne au dépassement de défilement la possibilité de réagir en premier (par exemple, en relâchant un effet d'étirement actif).
2. Pré-défilement imbriqué : permet de réagir au delta d'entrée avant la phase Scroll. Dans cette phase, un certain delta d'entrée peut être consommé ou simplement surveillé pour déclencher des modifications de l'UI, comme réduire ou développer une barre d'application.
3. Transformer le delta d'entrée : ajuste le signe du delta d'entrée brut en fonction de l'orientation et de la direction de la mise en page pour garantir un comportement de défilement naturel. Pour en savoir plus, consultez la section Transformer le delta d'entrée.
4. Défilement : cette phase reçoit le delta d'entrée disponible et non consommé, ajusté pour correspondre à la configuration du conteneur de défilement. Il utilise généralement ce delta pour mettre à jour son propre décalage de défilement.
5. Revenir au delta d'entrée brute : rétablit le signe du delta d'entrée brute d'origine pour le delta disponible et consommé de la phase Scroll.
6. Défilement imbriqué après le défilement : cette phase réagit une fois la phase de défilement principale terminée, en recevant les deltas disponibles et consommés nouvellement mis à jour. Il peut consommer n'importe quelle entrée disponible restante ou utiliser le contexte de ce qui vient d'être consommé.
7. Dépassement de la limite de défilement : cette dernière phase examine les deltas finaux disponibles et consommés. Toute entrée disponible restante qui atteint cette étape est généralement utilisée pour générer des effets de bord, comme un étirement ou une lueur, indiquant que l'utilisateur a atteint la limite de la zone de défilement.

Delta d'entrée de transformation

Le delta d'entrée du pointeur nécessite des ajustements de signe dans les phases de défilement pour correspondre aux contrats attendus. Avant que le delta n'atteigne la phase Scroll, les modificateurs de défilement ajustent le delta d'entrée en fonction de l'orientation, de la direction de la mise en page et des contextes RTL. Cela se produit, car l'entrée brute suit le mouvement physique des pixels du pointeur sur l'écran (par exemple, un mouvement vers le bas augmente la coordonnée Y de l'écran, ce qui donne un delta positif). Toutefois, pour obtenir un "défilement naturel" où le contenu se déplace avec votre doigt, le fait de faire glisser l'écran vers le bas signifie que la fenêtre d'affichage doit se déplacer vers le haut sur le contenu, ce qui correspond à un décalage de défilement négatif.

Les deltas d'entrée provenant d'autres sources d'entrée, telles qu'une molette de souris ou un pavé tactile, ne sont pas transformés tout au long des phases de défilement.

Exemple : le pointeur se déplace vers la droite à l'aide de Modifier.horizontalScroll()

Pour comprendre comment les deltas sont consommés et transformés, consultez la figure 2, qui mappe un geste où le pointeur se déplace vers la droite.

• Pré-défilement : le geste commence par un delta d'entrée brute positif de 100.
  • Overscroll observe cela et consomme 10, ce qui laisse 90.
  • Le pré-défilement imbriqué donne au composant parent la possibilité de réagir, en consommant 30. Le delta brut restant est de 60.
• Transformation A : avant d'entrer dans la phase Scroll, horizontalScroll inverse le delta brut positif restant (60) en un delta négatif (-60). Cela permet de s'assurer que la fenêtre d'affichage se déplace vers la gauche afin que le contenu semble se déplacer vers la droite avec le doigt de l'utilisateur.
• Défilement : le composant de défilement cible consomme une partie de ce delta transformé pour mettre à jour son décalage de défilement. Dans cet exemple, il consomme -30, ce qui laisse -30 non consommé.
• Transformation B : le delta de défilement non consommé (-30) est reconverti en delta brut positif (30) pour correspondre au contrat de défilement et de dépassement de défilement imbriqués.
• Après le défilement : le delta brut restant est renvoyé dans le pipeline.
  • Nested scroll post-scroll consomme 10, ce qui laisse 20.
  • L'effet de dépassement de défilement utilise les 20 derniers pour générer des effets visuels sur les bords, tels qu'un étirement ou une lueur, en résolvant complètement le delta d'entrée à 0.

Documentation de référence sur la transformation delta des entrées de pointeur

Le tableau suivant décrit la façon dont les deltas d'entrée sont signés pour les différentes phases et directions d'entrée du pointeur.

	Delta d'entrée brute	Effet de défilement hors limites	Défilement imbriqué	scrollableArea avec orientation horizontale	scrollableArea avec une orientation horizontale (inversée)	scrollableArea avec orientation verticale	scrollableArea avec orientation verticale (inversée)
Le pointeur se déplace VERS LE HAUT	Négatif	Négatif	Négatif	N/A	N/A	Positif	Négatif
Le pointeur se déplace VERS LE BAS	Positif	Positif	Positif	N/A	N/A	Négatif	Positif
Le pointeur se déplace vers la GAUCHE.	Négatif	Négatif	Négatif	Positif (négatif pour RTL)	Négatif (positif pour les langues s'écrivant de droite à gauche)	N/A	N/A
Le pointeur se déplace vers la DROITE.	Positif	Positif	Positif	Négatif (positif pour les langues s'écrivant de droite à gauche)	Positif (négatif pour RTL)	N/A	N/A