Das Scrollen ist in mehrere Phasen unterteilt. Das Eingabedelta wird über eine Abfolge von Phasen weitergeleitet, 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 bei jedem Schritt weitergegeben. So erhält jede Phase den vollständigen Kontext, der erforderlich ist, um auf das Scroll-Ereignis zu reagieren, es zu nutzen oder darauf zu warten.
Wie in Abbildung 1 dargestellt, folgt der Scrollvorgang genau dieser Reihenfolge:
- Overscroll:Erhält zuerst das anfängliche Eingabe-Delta, sodass Overscroll zuerst reagieren kann (z. B. durch Entspannen eines aktiven Streckeffekts).
- Vorscrollen bei verschachteltem Scrollen:Bietet die Möglichkeit, vor der Scrollphase auf das Eingabedelta zu reagieren. In dieser Phase wird möglicherweise ein Teil des Eingabe-Deltas verbraucht oder es wird nur überwacht, um Änderungen an der Benutzeroberfläche auszulösen, z. B. das Minimieren oder Maximieren einer App-Leiste.
- Transform input delta: Passt das Vorzeichen des Roh-Eingabedeltas basierend auf der Layoutausrichtung und -richtung an, um ein natürliches Scrollverhalten zu ermöglichen. Weitere Informationen finden Sie im Abschnitt Eingabedelta transformieren.
- Scrollen:In dieser Phase wird das verfügbare, nicht verbrauchte Eingabe-Delta empfangen, das an die Konfiguration des scrollbaren Containers angepasst ist. In der Regel wird dieses Delta verwendet, um den eigenen Scroll-Offset zu aktualisieren.
- Revert to raw input delta: Setzt das verfügbare und verbrauchte Delta aus der Scroll-Phase auf das ursprüngliche Vorzeichen des Roh-Eingabedeltas zurück.
- Verschachteltes Scrollen nach dem Scrollen:Diese Phase reagiert, nachdem die Hauptscrollphase abgeschlossen ist. Dabei werden die neu aktualisierten verfügbaren und verbrauchten Deltas empfangen. Es kann alle verbleibenden verfügbaren Eingaben verarbeiten oder den Kontext der gerade verarbeiteten Eingaben verwenden.
- 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 Randeffekte wie Dehnen oder Leuchten zu erzeugen, die darauf hinweisen, dass der Nutzer die Grenze des scrollbaren Bereichs erreicht hat.
Eingabe-Delta transformieren
Das Delta der Zeigereingabe erfordert Vorzeichenanpassungen über die Scrollphasen hinweg, um den erwarteten Verträgen zu entsprechen. Bevor das Delta die Phase Scroll erreicht, passen Scroll-Modifikatoren das Eingabe-Delta basierend auf Ausrichtung, Layoutrichtung und RTL-Kontexten an. Das liegt daran, dass bei der Roheingabe 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 Darstellungsbereich beim Ziehen nach unten über den Inhalt nach oben verschieben, was einem negativen Scroll-Offset entspricht.
Eingabe-Deltas von anderen Eingabequellen wie einem Mausrad oder Touchpad werden während der Scrollphasen nicht transformiert.
Beispiel: Der Zeiger bewegt sich mit Modifier.horizontalScroll() nach rechts
In Abbildung 2 wird gezeigt, wie Deltas verarbeitet und transformiert werden. Hier wird eine Geste dargestellt, bei der sich der Zeiger nach rechts bewegt.
- Vor dem Scrollen:Die Geste beginnt mit einem positiven Roh-Eingabedelta von 100.
- Overscroll erkennt dies und verbraucht 10, sodass 90 übrig bleiben.
- Vorscrollen beim verschachtelten Scrollen gibt der übergeordneten Komponente die Möglichkeit, zu reagieren und 30 zu verbrauchen. Das verbleibende Rohdelta beträgt 60.
- Transformation A: Bevor die Scroll-Phase beginnt, invertiert
horizontalScrolldas verbleibende positive Roh-Delta (60) in ein negatives Delta (-60). Dadurch wird der Darstellungsbereich 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 unverbraucht bleiben.
- Transformation B: Das nicht verbrauchte 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 an die Pipeline übergeben.
- Post-Scroll des verschachtelten Scrollens verbraucht 10, sodass 20 übrig bleiben.
- Der Overscroll-Effekt verwendet die letzten 20, um visuelle Randeffekte wie Dehnung oder Glühen zu erzeugen, wodurch das Eingabedelta vollständig auf 0 aufgelöst wird.
Referenz zur Delta-Transformation für Zeigereingaben
In der folgenden Tabelle wird beschrieben, wie Eingabe-Deltas in 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) |
|
|---|---|---|---|---|---|---|---|
| Mauszeiger bewegt sich NACH OBEN | Negativ | Negativ | Negativ | – | – | Positiv | Negativ |
| Der Mauszeiger bewegt sich NACH UNTEN. | Positiv | Positiv | Positiv | – | – | Negativ | Positiv |
| Mauszeiger bewegt sich nach LINKS | Negativ | Negativ | Negativ | Positiv (negativ für RTL) | Negativ (positiv für RTL) | – | – |
| Mauszeiger bewegt sich nach RECHTS | Positiv | Positiv | Positiv | Negativ (positiv für RTL) | Positiv (negativ für RTL) | – | – |