רכיבי Surface ב-Jetpack Compose Glimmer

מכשירי XR שנתמכים

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

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

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

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

המשטח אחראי למאפיינים הפיזיים והוויזואליים הבאים:

• ‫Clipping: חותך את הצאצאים לצורה שצוינה.
• גבול: מצייר גבול פנימי כדי להדגיש את הגבול של הרכיב. כשמוצג מיקוד, הוא מצייר גבול רחב יותר עם הדגשה של המיקוד.
• רקע: המערכת תחיל צבע רקע על האזור.
• אפקטים של עומק: יוצרים צללים DepthEffect על סמך המצב של הרכיב (למשל, ברירת מחדל לעומת מיקוד).
• צבע התוכן: מספק צבע לטקסט ולאייקונים בתוך הרכיב. צבע זה מחושב כברירת מחדל מצבע הרקע.
• מצבי אינטראקציה: מצייר שכבת-על של לחיצה כשהמשטח נלחץ, וגבול רחב יותר עם הדגשה כשהמיקוד הוא על המשטח.

דוגמה: יצירת פלטפורמה

הקוד הבא יוצר משטח עם חיתוך, רקע ומסגרות ברירת מחדל:

@Composable
fun SurfaceSample() {
    Box(Modifier.surface().padding(horizontal = 24.dp, vertical = 20.dp)) {
        Text("This is a surface")
    }
}

אינטראקציה ומיקוד

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

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

@Composable
fun FocusableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        modifier = Modifier
            .size(100.dp)
            .surface(interactionSource = interactionSource)
            .focusable(interactionSource = interactionSource),
        contentAlignment = Alignment.Center
    ) {
        Text("Focusable")
    }
}

@Composable
fun ClickableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        modifier = Modifier
            .size(100.dp)
            .surface(interactionSource = interactionSource)
            .focusable(interactionSource = interactionSource)
            .clickable(
                interactionSource = interactionSource,
                indication = null
            ) { /* Handle click action */ },
        contentAlignment = Alignment.Center
    ) {
        Text("Clickable")
    }
}
SurfaceSamples.kt

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

• מקור משותף לאינטראקציה במשטחים שאפשר להתמקד בהם: גם .surface() וגם .focusable() צריכים להיות מחוברים לאותו interactionSource. כך הממשק מגיב לשינויים במיקוד.

• מקור משותף של אינטראקציות עם משטחים שאפשר ללחוץ עליהם: גם .surface() וגם .clickable() צריכים לשתף את אותו interactionSource. כך אפשר לוודא שהמצבים החזותיים (כמו לחיצה או מיקוד) מסונכרנים, כדי שהמשטח יגיב חזותית לקלט של המשתמש.

• סדר המקשים לצירוף: הסדר של המקשים לצירוף הוא קריטי. התג .surface() גוזם פריסה, ולכן אם מציבים אותו לפני .clickable(), אז אזור הלחיצה מוגבל לצורה של המשטח. אם .clickable() מופיע ראשון, יכול להיות שאזור האינטראקציה יתרחב מעבר לגבולות הגלויים של הרכיב.

SurfaceDepthEffect

הקלאס SurfaceDepthEffect מנהל את המעבר של הצללות בין מצבי אינטראקציה:

• ‫depthEffect: אפקט הצל שמוגדר כברירת מחדל כשמשטח נמצא במצב ברירת המחדל שלו.
• ‫focusedDepthEffect: אפקט הצל שמופיע כשמתמקדים במשטח.