לחצנים ב-Jetpack Compose Glimmer

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

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

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

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

ברירת מחדל

דוגמה לכמה סגנונות שונים של לחצנים ב-Jetpack Compose Glimmer. בדוגמאות האלה מוצגים לחצנים בגודל בינוני עם שלוש מצבים: מופעל (1), מודגש (2) ולחוץ (3).

גדול

דוגמה לכמה סגנונות שונים של לחצנים ב-Jetpack Compose Glimmer. בדוגמאות האלה מוצגים לחצנים גדולים עם שלושה מצבים: מופעל (1), ממוקד (2) ולחוץ (3).

אנטומיה

לחצן מורכב ממאגר ומתווית, עם סמלים אופציונליים בתחילת הלחצן ובסופו.

חלק תיאור

מאגר

משטח הרקע של הלחצן.

תווית

הטקסט שמתאר את הפעולה.

סמל (אופציונלי)

אינדיקטורים חזותיים בתחילת הטקסט או בסופו.

גדלים

לחצני Glimmer של Jetpack Compose תומכים בשני גדלים שונים. הם משפיעים על הגובה המינימלי ועל הריווח הפנימי.

גודל גובה מינימלי שימוש ברירת מחדל

בינוני

48.dp

פעולות ורשימות רגילות (ברירת מחדל).

גדול

72.dp

פעולות מודגשות או נקודות כניסה ראשיות למסך.

מדינות

הלחצנים ב-Jetpack Compose Glimmer משנים את המראה שלהם כדי להעביר את המצב שלהם.

  • מופעל: מצב ברירת המחדל של לחצן אינטראקטיבי.
  • במיקוד: כשהלחצן במיקוד, מוחל עליו GlimmerTheme.depthEffectLevels.level1 והדגשה של הגבול במיקוד.
  • לחוץ: כשמפעילים את האפשרות הזו, מוחלת על המשטח שכבת-על לבנה שקופה למחצה.
  • מושבת: הכפתור לא מגיב לקלט והמראה שלו משתנה.

ברירות מחדל של לחצנים

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

  • כברירת מחדל, הלחצנים משתמשים ב-GlimmerTheme.typography.bodySmall. חשוב לוודא שהטקסט בלחצנים תמציתי ומתאר בבירור את הפעולה.
  • צורת ברירת המחדל של לחצן היא GlimmerTheme.shapes.large. העיגול העקבי הזה עוזר למשתמשים לזהות לחצנים בממשק של משקפי ה-Display.

דוגמה: לחצן עם טקסט

הקוד הבא יוצר לחצן רגיל עם טקסט:

@Composable
fun ButtonSample() {
    Button(onClick = {}) { Text("Send") }
}

דוגמה: לחצנים עם סמלים מובילים וסמלים נגררים

אפשר גם להוסיף סמלים לתחילת הטקסט (באמצעות leadingIcon) או לסוף הטקסט (באמצעות trailingIcon) כדי לספק הקשר נוסף.

הקוד הבא יוצר לחצן עם סמל מוביל:

@Composable
fun ButtonWithLeadingIconSample() {
    Button(onClick = {}, leadingIcon = { Icon(FavoriteIcon, "Localized description") }) {
        Text("Send")
    }
}