Scrollphasen

Das Scrollen ist in mehrere Phasen unterteilt. Die Eingabeänderung wird in einer Reihe von Phasen verarbeitet, damit jede Phase die Möglichkeit hat, die Bewegung zu verarbeiten oder darauf zu reagieren.

Während dieses Zyklus werden sowohl das verfügbare Eingabedelta als auch das verbrauchte Eingabedelta in jedem Schritt weitergegeben. So erhält jede Phase den vollständigen Kontext, der erforderlich ist, um auf das Scroll-Ereignis zu reagieren, es zu verarbeiten oder darauf zu warten.

Wie in Abbildung 1 dargestellt, folgt der Scrollvorgang genau dieser Reihenfolge:

1. Overscroll:Empfängt zuerst das ursprüngliche Eingabedelta, wodurch Overscroll die Möglichkeit erhält, zuerst zu reagieren (z. B. durch Aufheben eines aktiven Dehnungseffekts).
2. Vorscrollen bei verschachteltem Scrollen:Bietet die Möglichkeit, vor der Scroll-Phase auf die Eingabe zu reagieren. In dieser Phase wird möglicherweise ein Eingabedelta verarbeitet oder nur überwacht, um Änderungen an der Benutzeroberfläche auszulösen, z. B. das Minimieren oder Maximieren einer App-Leiste.
3. Transform input delta (Eingabe-Delta transformieren): Passt das Vorzeichen des Roh-Eingabe-Deltas basierend auf der Ausrichtung und Richtung des Layouts an, um ein natürliches Scrollverhalten zu gewährleisten. Weitere Informationen finden Sie im Abschnitt Transformations-Eingabedelta.
4. Scrollen:In dieser Phase wird das verfügbare, nicht verwendete Eingabedelta empfangen, das an die Konfiguration des Scrollcontainers angepasst wurde. Normalerweise wird dieses Delta verwendet, um den eigenen Scroll-Offset zu aktualisieren.
5. Zum Rohdaten-Delta zurückkehren: Das verfügbare und genutzte Delta aus der Phase Scrollen wird auf das ursprüngliche Vorzeichen des Rohdaten-Deltas zurückgesetzt.
6. Verschachteltes Scrollen nach dem Scrollen:Diese Phase wird nach Abschluss der Hauptscrollphase ausgeführt und empfängt die neu aktualisierten verfügbaren und verbrauchten Deltas. Sie kann alle verbleibenden verfügbaren Eingaben verwenden oder den Kontext der gerade verarbeiteten Eingaben nutzen.
7. Overscroll:In dieser letzten Phase werden die endgültigen verfügbaren und verbrauchten Deltas betrachtet. Alle verbleibenden verfügbaren Eingaben, die diese Phase erreichen, werden in der Regel verwendet, um Ränder zu rendern, z. B. eine Dehnung oder ein Leuchten, die darauf hinweisen, dass der Nutzer die Grenze des scrollbaren Bereichs erreicht hat.

Delta der Transformationseingabe

Für die Delta-Eingabe mit dem Mauszeiger sind Anpassungen des Vorzeichens in den Scrollphasen erforderlich, damit sie den erwarteten Kontrakten entsprechen. Bevor das Delta die Scroll-Phase erreicht, werden Eingabedeltas durch Scrollmodifikatoren basierend auf Ausrichtung, Layoutrichtung und RTL-Kontexten angepasst. Das liegt daran, dass bei der Rohdateneingabe die physische Pixelbewegung des Mauszeigers auf dem Bildschirm erfasst wird. Wenn Sie den Mauszeiger beispielsweise nach unten bewegen, erhöht sich die Y-Koordinate des Bildschirms, was zu einem positiven Delta führt. Um jedoch ein „natürliches Scrollen“ zu erreichen, bei dem sich der Inhalt mit dem Finger bewegt, muss sich der Viewport beim Herunterziehen über den Inhalt nach oben verschieben, was einem negativen Scroll-Offset entspricht.

Eingabe-Deltas aus anderen Eingabequellen wie einem Mausrad oder Touchpad werden während der Scrollphasen nicht transformiert.

Beispiel: Zeiger bewegt sich mit Modifier.horizontalScroll() nach rechts

Wie Deltas verarbeitet und transformiert werden, sehen Sie in Abbildung 2, in der eine Geste dargestellt ist, bei der der Mauszeiger nach rechts bewegt wird.

• Vor dem Scrollen:Die Geste beginnt mit einem positiven Rohdaten-Delta von 100.
  • Overscroll berücksichtigt dies und verbraucht 10, sodass 90 übrig bleiben.
  • Mit Nested scroll pre-scroll hat die übergeordnete Komponente die Möglichkeit, zu reagieren und 30 zu verarbeiten. Das verbleibende Rohdelta beträgt 60.
• Transformation A: Vor der Scroll-Phase kehrt horizontalScroll das verbleibende positive Rohdelta (60) in ein negatives Delta (–60) um. Dadurch wird der Viewport nach links verschoben, sodass sich der Inhalt mit dem Finger des Nutzers nach rechts zu bewegen scheint.
• Scrollen:Die scrollbare Zielkomponente verwendet einen Teil dieses transformierten Deltas, um ihren Scroll-Offset zu aktualisieren. In diesem Beispiel werden –30 verbraucht, sodass –30 nicht verbraucht werden.
• Transformation B:Das nicht verarbeitete Scroll-Delta (-30) wird wieder in ein positives Roh-Delta (30) umgewandelt, um dem Vertrag für verschachteltes Scrollen und Overscroll zu entsprechen.
• Nach dem Scrollen:Das verbleibende Rohdelta wird wieder nach oben in der Pipeline übergeben.
  • Nested scroll post-scroll verbraucht 10, sodass 20 übrig bleiben.
  • Der Overscroll-Effekt nutzt die letzten 20, um visuelle Kanteneffekte wie Dehnung oder Leuchten zu erzeugen. Das Eingabedelta wird dabei vollständig auf 0 reduziert.

Referenz zur Delta-Transformation für Zeigereingabe

In der folgenden Tabelle wird beschrieben, wie Eingabedeltas in den verschiedenen Phasen und Richtungen für die Zeigereingabe signiert werden.

	Delta der Rohdaten	Overscroll-Effekt	Verschachteltes Scrollen	scrollableArea mit horizontaler Ausrichtung	scrollableArea mit horizontaler Ausrichtung (umgekehrt)	scrollableArea mit vertikaler Ausrichtung	scrollableArea mit vertikaler Ausrichtung (umgekehrt)
Der Mauszeiger bewegt sich NACH OBEN.	Negativ	Negativ	Negativ	–	–	Positiv	Negativ
Der Mauszeiger bewegt sich NACH UNTEN.	Positiv	Positiv	Positiv	–	–	Negativ	Positiv
Zeiger bewegt sich NACH LINKS	Negativ	Negativ	Negativ	Positiv (negativ für RTL)	Negativ (positiv für RTL)	–	–
Der Mauszeiger bewegt sich NACH RECHTS.	Positiv	Positiv	Positiv	Negativ (positiv für RTL)	Positiv (negativ für RTL)	–	–