רשימות ב-Jetpack פיתוח נייטיב Glimmer

מכשירי XR שמתאימים לשימוש

ההנחיות האלה יעזרו לכם ליצור חוויות למכשירי XR מהסוגים הבאים.

מידע על סוגי מכשירי XR →

מידע על סוגי מכשירי XR →

ב-Glimmer של Jetpack Compose, הרכיב VerticalList פועל באופן דומה לרכיב LazyColumn של Compose, בכך שהוא יוצר פריטים גלויים ומסדר אותם כדי לשמור על ביצועים גבוהים. עם זאת, ב-Jetpack Compose Glimmer, רשימות אנכיות נוצרות עבור אמצעי בקרה של משקפיים לתצוגה, שבהם המשתמש מנהל אינטראקציה באמצעות לוח מגע ולא מסך מגע. משתמש במובייל יכול להקיש על כל נקודה במסך בכל שלב, אבל משתמש במשקפיים עם תצוגה יכול לקיים אינטראקציה רק עם הפריט שנמצא במיקוד.

התנהגות של פריטים ראשיים ופריטים משניים

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

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

דוגמה: רשימה אנכית עם כמה פריטים

בדוגמת הקוד הבאה מוצג אופן השימוש ברשימה אנכית עם פריט ופריטים בשיטת DSL כדי ליצור רשימת פריטים:

@Composable
fun VerticalListSample() {
    VerticalList {
        item { ListItem { Text("Header") } }
        items(count = 10) { index -> ListItem { Text("Item-$index") } }
        item { ListItem { Text("Footer") } }
    }
}
ListSamples.kt

דוגמה: רשימה אנכית עם משבצת לכותרת

‫Jetpack Compose Glimmer מספק גם עומס יתר של רשימה אנכית שמכילה משבצת של כותרת. הכותרת שלא ניתן להתמקד בה (בדרך כלל TitleChip) נשארת קבועה במרכז העליון, בזמן שתוכן הרשימה נגלל מתחתיה.

הקוד הבא יוצר רשימה אנכית עם משבצת לכותרת:

@Composable
fun VerticalListWithTitleChipSample() {
    val ingredientItems =
        listOf("Milk", "Flour", "Egg", "Salt", "Apples", "Butter", "Vanilla", "Sugar", "Cinnamon")
    VerticalList(title = { TitleChip { Text("Ingredients") } }) {
        items(ingredientItems) { text -> ListItem { Text(text) } }
    }
}
ListSamples.kt

שימוש במצב הרשימה לפעולות תכנותיות ברשימה

אפשר להשתמש במאפיין ListState כדי לשלוט בהיבטים שונים של מצב הרשימה ולעקוב אחריהם, כמו מיקום הגלילה באמצעות המאפיינים firstVisibleItemIndex ו-firstVisibleItemScrollOffset.

אפשר להעביר את המצב הזה באמצעות rememberListState כדי לגלול באופן פרוגרמטי באמצעות scrollToItem ו-animateScrollToItem.