ב-Jetpack Compose Glimmer, GlimmerLazyColumn פועל באופן דומה ל-LazyColumn ב-Compose, בכך שהוא מבצע קומפוזיציה ופריסה רק של פריטים גלויים כדי לשמור על ביצועים גבוהים. עם זאת, עמודות Glimmer lazy נועדו להצגת אמצעי בקרה במשקפיים, שבהם המשתמש מקיים אינטראקציה באמצעות לוח מגע ולא מסך מגע. משתמש במובייל יכול להקיש על כל נקודה במסך בכל שלב, אבל משתמש במשקפיים עם תצוגה יכול ליצור אינטראקציה רק עם הפריט שנמצא במוקד.
התנהגות של פריטים ראשיים ופריטים משניים
העמודות ב-Glimmer lazy מטפלות אוטומטית בניווט מבוסס-מיקוד. בניגוד לרשימות במכשירים ניידים שבהן המיקוד והגלילה לרוב נפרדים, בעמודה עצלה של Glimmer יש תיאום בין השניים: המיקוד עובר בין פריטי הצאצא כשהמשתמש גולל באמצעות משטח המגע. אי אפשר להתמקד ברשימה עצמה, לכן היא מנהלת את המיקוד של רכיבי הצאצא שלה ומבקשת מיקוד בשבילם, כדי שלמשתמש תהיה נקודת אינטראקציה ברורה בזמן הגלילה.
מכיוון שאין קלט מגע ישיר, צריך להגדיר את כל פריטי הצאצא בתוך עמודה עצלה של Glimmer כפריטים שאפשר להתמקד בהם. כשפריטים נמצאים במיקוד, צריך לספק גם תגובה חזותית, כמו גבול פעיל או הדגשה. המשתמשים עדיין יכולים לגלול מעבר לפריטים שלא ניתן להתמקד בהם, אבל הם לא יכולים לבצע איתם אינטראקציה. כדאי להשתמש ברכיבים מובנים כמו ListItem או Card כשזה אפשרי, כי הרכיבים האלה כבר ניתנים למיקוד ומספקים משוב חזותי למצבי מיקוד.
דוגמה: עמודות עצלות של Glimmer עם כמה פריטים
בדוגמה הבאה של קוד אפשר לראות איך משתמשים בשיטות item ו-items של Glimmer DSL כדי ליצור רשימת פריטים:
@Composable fun GlimmerLazyColumnSample() { GlimmerLazyColumn { item { ListItem { Text("Header") } } items(count = 10) { index -> ListItem { Text("Item-$index") } } item { ListItem { Text("Footer") } } } }
דוגמה: עמודות עצלות של Glimmer עם משבצת כותרת
Jetpack Compose Glimmer מספק גם עומס יתר של GlimmerLazyColumn שמכיל משבצת של כותרת. הכותרת שלא ניתן להתמקד בה, בדרך כלל TitleChip, נשארת קבועה בחלק העליון המרכזי של המסך בזמן שתוכן הרשימה נגלל מתחתיה.
הקוד הבא יוצר עמודה עצלה של Glimmer עם משבצת כותרת:
@Composable fun GlimmerLazyColumnWithTitleChipSample() { val ingredientItems = listOf("Milk", "Flour", "Egg", "Salt", "Apples", "Butter", "Vanilla", "Sugar", "Cinnamon") GlimmerLazyColumn(title = { TitleChip { Text("Ingredients") } }) { items(ingredientItems) { text -> ListItem { Text(text) } } } }
שימוש במצב רשימה עצלה של Glimmer לפעולות תכנותיות ברשימה
כדי לשלוט בהיבטים שונים של מצב הרשימה ולעקוב אחריהם, כמו מיקום הגלילה שלה, באמצעות המאפיינים firstVisibleItemIndex ו-firstVisibleItemScrollOffset, משתמשים ב-GlimmerLazyListState.
אפשר להעביר את הסטטוס הזה באמצעות rememberGlimmerLazyListState כדי לגלול באופן פרוגרמטי באמצעות scrollToItem ו-animateScrollToItem.