מתגים ב-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

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

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

@Composable
fun ToggleButtonWithLeadingIconSample() {
    var checked by remember { mutableStateOf(false) }

    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(
                if (checked) FavoriteIcon else OutlinedFavoriteIcon,
                contentDescription = "Toggle favorite"
            )
        },
        onCheckedChange = { checked = it }
    ) {
        Text(if (checked) "On" else "Off")
    }
}
ToggleButtonSamples.kt