מתגים ב-Jetpack Compose Glimmer

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

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

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

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

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

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

יש גם כפתורים רגילים וכפתורי סמלים לתרחישי שימוש אחרים.

אנטומיה

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

גדלים

בדומה ללחצנים רגילים, לחצני החלפה תומכים בשני גדלים:

ברירות מחדל של מתגים

כברירת מחדל, לחצני החלפה משתמשים ב-ToggleButtonDefaults.animateShape. כך נוצר מעבר חלק בין המצבים הבאים:

• לא מסומן: GlimmerTheme.shapes.large (בדרך כלל CircleShape).
• מסומן: ToggleButtonDefaults.CheckedShape (RoundedCornerShape עם 20.dp פינות).

הסיווג צריך להיות מוגדר אוטומטית למצב הבא:ToggleButtonColors

• לא מסומן: ברירת המחדל היא GlimmerTheme.colors.surface.
• מסומן: ברירת המחדל היא GlimmerTheme.colors.surface.

אנימציה

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

• ‫animateShape: מספק Shape שמבצע אינטרפולציה של גדלי הפינות באמצעות מפרט של אנימציית קפיץ (stiffness = 600f).
• ‫colors: פונקציית factory להתאמה אישית של צבעי הרקע והתוכן בשני המצבים.
• ‫CheckedShape: RoundedCornerShape(20.dp) סטטי שמשמש למצב המסומן.
• ‫contentPadding: עובר בירושה מ-ButtonDefaults.contentPadding.

דוגמה: מתג

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

@Composable
fun ToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(checked = checked, onCheckedChange = { checked = it }) { Text(text) }
}
ToggleButtonSamples.kt

דוגמה: לחצן החלפה עם סמל מוביל

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

@Composable
fun ToggleButtonWithLeadingIconSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(if (checked) FavoriteIcon else OutlinedFavoriteIcon, "Localized description")
        },
        onCheckedChange = { checked = it },
    ) {
        Text(text)
    }
}
ToggleButtonSamples.kt