הסבר על שלבי הגלילה

הגלילה מחולקת לכמה שלבים. הדלתא של הקלט נשלחת דרך רצף של שלבים כדי לוודא שלכל שלב יש הזדמנות לצרוך את התנועה או להגיב לה.

בכל שלב במחזור הזה, מועברים גם הדלתא של הקלט הזמין וגם הדלתא של הקלט שנצרך. כך כל שלב מקבל את ההקשר המלא שנדרש כדי להגיב לאירוע הגלילה, לצרוך אותו או להאזין לו.

תרשים של מחזור גלילה שמציג את שלבי הגלילה של אירוע גלילה של משתמש
איור 1. תרשים של מחזור גלילה שמציג את שלבי הגלילה של אירוע גלילה של משתמש.

כמו שמוצג באיור 1, תהליך הגלילה מתבצע בסדר המדויק הבא:

  1. גלילה מעבר לקצה: מקבלת קודם את הדלתא של הקלט הראשוני, מה שמאפשר לגלילה מעבר לקצה להגיב קודם (לדוגמה, על ידי הרפיה של אפקט מתיחה פעיל).
  2. גלילה מקדימה של גלילה בתצוגה נפרדת: מאפשרת להגיב לדלתא של הקלט לפני שלב הגלילה. בשלב הזה, יכול להיות שחלק מהשינוי בקלט ינוצל, או שרק יתבצע מעקב אחריו כדי להפעיל שינויים בממשק המשתמש, כמו כיווץ או הרחבה של סרגל האפליקציה.
  3. Transform input delta: התאמת הסימן של דלתת הקלט הגולמי על סמך הכיוון והפריסה של המסך כדי להבטיח התנהגות גלילה טבעית. מידע נוסף זמין בקטע המרת דלתא של קלט.
  4. גלילה: בשלב הזה מתקבלת דלתת הקלט הזמינה שלא נוצלה, והיא מותאמת להגדרות של מאגר הגלילה. בדרך כלל, הוא משתמש בדלתא הזו כדי לעדכן את היסט הגלילה שלו.
  5. Revert to raw input delta: החזרת הדלתא הזמינה והדלתא שנוצלה משלב ה-Scroll לסימן הדלתא המקורי של הקלט הגולמי.
  6. גלילה בתצוגה נפרדת אחרי גלילה: השלב הזה מגיב אחרי ששלב הגלילה הראשי הושלם, ומקבל את ההפרשים הזמינים והמנוצלים שעודכנו לאחרונה. הוא יכול לצרוך כל קלט זמין שנותר, או להשתמש בהקשר של מה שנצרך כרגע.
  7. גלילה מעבר לקצה: בשלב האחרון הזה נבדקים ההפרשים האחרונים הזמינים והמנוצלים. כל קלט זמין שנותר ומגיע לשלב הזה משמש בדרך כלל להפעלת אפקטים בקצוות, כמו מתיחה או זוהר, שמציינים שהמשתמש הגיע לגבול של האזור שניתן לגלילה.

שינוי הדלתא של הקלט

כדי להתאים לחוזים הצפויים, צריך לבצע התאמות סימן בשלבי הגלילה של דלתת הקלט של המצביע. לפני שהדלתא מגיעה לשלב הגלילה, משתני הגלילה משנים את דלתת הקלט בהתאם לכיוון, לכיוון הפריסה ולהקשרים של RTL. זה קורה כי הקלט הגולמי עוקב אחרי התנועה הפיזית של הסמן בפיקסלים על המסך (לדוגמה, תנועה כלפי מטה מגדילה את קואורדינטת ה-Y של המסך, וכך נוצרת דלתא חיובית). אבל כדי להשיג "גלילה טבעית" שבה התוכן זז עם האצבע, גרירה למטה פירושה שחלון התצוגה צריך לזוז למעלה מעל התוכן, וזה תואם להיסט גלילה שלילי.

הפרשי קלט ממקורות קלט אחרים, כמו גלגל העכבר או לוח המגע, לא משתנים במהלך שלבי הגלילה.

דוגמה: הסמן זז ימינה באמצעות Modifier.horizontalScroll()‎

תרשים שממפה תנועה שבה הסמן זז ימינה
איור 2. תרשים שממפה תנועה שבה הסמן זז ימינה.

כדי להבין איך המערכת צורכת וממירה את השינויים, אפשר לעיין באיור 2, שממפה תנועה שבה הסמן זז ימינה.

  • לפני הגלילה: התנועה מתחילה עם דלתא חיובית של קלט גולמי של 100.
    • גלילה מעבר לקצה מזהה את זה וצורכת 10, כך שנשארים 90.
    • גלילה מקדימה של גלילה בתצוגת עץ נותנת לרכיב ההורה הזדמנות להגיב, וצורכת 30. ההפרש הגולמי שנותר הוא 60.
  • טרנספורמציה א': לפני הכניסה לשלב הגלילה, horizontalScroll הופך את הדלתא החיובית הגולמית שנותרה (60) לדלתא שלילית (-60). כך מוודאים שנקודת התצוגה זזה שמאלה, כדי שהתוכן ייראה כאילו הוא זז ימינה עם האצבע של המשתמש.
  • גלילה: הרכיב הניתן לגלילה משתמש בחלק מהדלתא שעברה טרנספורמציה כדי לעדכן את היסט הגלילה. בדוגמה הזו, הוא צורך -30, ומשאיר -30 שלא נצרכו.
  • טרנספורמציה ב': הדלתא של הגלילה שלא נוצלה (‎-30) מומרת בחזרה לדלתא חיובית גולמית (30) כדי להתאים לחוזה של הגלילה המקוננת וגלילת היתר.
  • אחרי הגלילה: ההפרש הגולמי שנותר מועבר חזרה במעלה הצינור.
    • גלילה מקוננת אחרי גלילה צורכת 10, ומשאירה 20.
    • אפקט גלילת היתר משתמש ב-20 האחרונים כדי להפעיל אפקטים חזותיים בקצוות, כמו מתיחה או זוהר, ופותר באופן מלא את הדלתא של הקלט ל-0.

הפניה לטרנספורמציה של דלתא בקלט של הסמן

בטבלה הבאה מפורט איך השינויים בקלט נחתמים בשלבים ובכיוונים שונים של קלט המצביע.

הדלתא של נתוני הקלט הגולמיים אפקט גלילת יתר גלילה בתוך גלילה ‫scrollableArea בכיוון אופקי ‫scrollableArea בכיוון אופקי (הפוך) ‫scrollableArea בכיוון אנכי ‫scrollableArea בכיוון אנכי (הפוך)
הסמן זז למעלה שלילית שלילית שלילית לא רלוונטי לא רלוונטי חיובית שלילית
הסמן זז למטה חיובית חיובית חיובית לא רלוונטי לא רלוונטי שלילית חיובית
הסמן זז שמאלה שלילית שלילית שלילית חיובי (שלילי ב-RTL) שלילי (חיובי ב-RTL) לא רלוונטי לא רלוונטי
הסמן זז ימינה חיובית חיובית חיובית שלילי (חיובי ב-RTL) חיובי (שלילי ב-RTL) לא רלוונטי לא רלוונטי