מערכים אנכיים ב-Jetpack Compose Glimmer

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

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

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

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

ב-Jetpack Compose Glimmer,‏ VerticalStack הוא פריסה עצלה עם גלילה אנכית, שמסדרת פריטים ברצף תלת-ממדי עם חפיפה ויזואלית. הפריט הראשי מוצג בחזית, והפריטים הבאים מוצבים מאחוריו.

התנהגויות של גלילה ומיקום

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

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

ניהול המיקוד

ה-VerticalStack משתמש במערכת מיקוד מיוחדת כדי לוודא שהפריט הנוכחי בחזית הוא תמיד היעד העיקרי לאינטראקציית משתמש:

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

דוגמה: יצירת ערימה אנכית

הקוד הבא יוצר סטאק אנכי עם כמה פריטים:

@Composable
fun VerticalStackSample() {
    VerticalStack(modifier = Modifier.fillMaxWidth().height(364.dp)) {
        item(key = 0) {
            Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-0",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
        }
        items(count = 10, key = { it + 1 }) { index ->
            Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-${index + 1}",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
        }
    }
}
StackSamples.kt

מידע חשוב על הקוד

• מגדיר את textMotion של LocalTextStyle הטקסט לערך Animated. כך אפשר לשפר את עיבוד הטקסט במהלך אנימציות של פריסות או מעברים של שינוי גודל, ולמנוע חפצים של הצמדת פיקסלים.
• הפונקציה מספקת גודל ספציפי של 364.dp לגובה של הערימה האנכית. תמיד צריך לציין גובה ספציפי, להשתמש במגדיר גובה או להחיל את המגדיר fillMaxSize כדי להגדיר את האזור החזותי למעברים בין כרטיסים.
• בניגוד לרכיבים אחרים שמקבלים פרמטר צורה ישירות, VerticalStack מנהל את הגבולות החזותיים של הפריטים שלו באמצעות משנה המאפיינים itemDecoration. בדוגמה הזו, הצורה זהה לכל הפריטים, כולל הפריט הראשוני itemDecoration, כדי לשמור על אפקטים חזותיים ועל חיתוך עקביים. בדוגמה הזו נשתמש בערך ברירת המחדל CardDefaults.shape.