לחצנים ב-Jetpack Compose Glimmer

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

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

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

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

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

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

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

ברירת מחדל

גדול

אנטומיה

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

גדלים

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

מדינות

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

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

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

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

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

דוגמה: כפתור עם טקסט וסמלים

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

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

Button(
    onClick = { /* Handle navigation or action */ },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = null) },
    trailingIcon = { Icon(SendIcon, contentDescription = null) }
) {
    Text("Text Label", style = GlimmerTheme.typography.titleSmall)
}
ButtonSamples.kt

קבוצות של לחצנים

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

דוגמה: קבוצות של לחצנים

ButtonGroup(modifier = Modifier.fillMaxWidth()) {
    Button(onClick = {}) { Text("Button 1") }
    Button(onClick = {}) { Text("Button 2") }
    Button(onClick = {}) { Text("Button 3") }
    Button(onClick = {}) { Text("Button 4") }
    Button(onClick = {}) { Text("Button 5") }
}
ButtonSamples.kt

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

אפשר להעביר את המיקוד לכל כפתור בקבוצה כדי לשלוט בבחירה באופן ידני.

אפשר להתאים אישית את התנהגות הגלילה ולשלוט בה באמצעות המצב ButtonGroup:

1. מצהירים על המדינה באמצעות rememberButtonGroupState.
2. מעבירים אותו לרכיב הקומפוזבילי ButtonGroup.
3. מתקשרים אל animateScrollToItem (או אל scrollToItem כדי לגלול באופן מיידי) כדי לגלול לפריט מסוים ולהעביר אליו את המיקוד באופן אוטומטי.

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

val scope = rememberCoroutineScope()
val state = rememberButtonGroupState()
ButtonGroup(modifier = Modifier.fillMaxWidth(), state = state) {
    Button(onClick = { scope.launch { state.animateScrollToItem(1) } }) {
        Text("Select last item")
    }
    Button(onClick = { scope.launch { state.animateScrollToItem(0) } }) {
        Text("Select first item")
    }
}
ButtonSamples.kt