כן, לעבור למכשיר הזה

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

• מפעילים או משביתים את ההגדרה.
• הפעלה או השבתה של תכונה.
• בוחרים באחת מהאפשרויות.

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

איור 1. רכיב המתג.

הטמעה בסיסית

להגדרה המלאה של ה-API, אפשר לעיין במסמך העזרה של Switch. אלה כמה מהפרמטרים העיקריים שיכול להיות שתצטרכו להשתמש בהם:

• checked: המצב הראשוני של המתג.
• onCheckedChange: פונקציית קריאה חוזרת (callback) שנקראת כשהסטטוס של המתג משתנה.
• enabled: מצב המתג (מופעל או מושבת).
• colors: הצבעים שבהם נעשה שימוש למתג.

הדוגמה הבאה היא הטמעה מינימלית של ה-composable Switch.

@Composable
fun SwitchMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}
Switch.kt

ההטמעה הזו נראית כך כשהאפשרות לא מסומנת:

איור 2. מתג שלא מסומן.

כך הוא נראה כשהאפשרות מסומנת:

איור 3. מתג מסומן.

הטמעה מתקדמת

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

• thumbContent: אפשר להשתמש באפשרות הזו כדי להתאים אישית את המראה של הסמל כשהיא מסומנת.
• colors: אפשר להשתמש באפשרות הזו כדי להתאים אישית את הצבע של הטראק והתמונה הממוזערת.

תמונה ממוזערת בהתאמה אישית

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

@Composable
fun SwitchWithIconExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        thumbContent = if (checked) {
            {
                Icon(
                    imageVector = Icons.Filled.Check,
                    contentDescription = null,
                    modifier = Modifier.size(SwitchDefaults.IconSize),
                )
            }
        } else {
            null
        }
    )
}
Switch.kt

בהטמעה הזו, המראה של התג ללא סימון זהה לדוגמה שבקטע הקודם. עם זאת, כשבודקים את ההטמעה הזו, היא נראית כך:

איור 4. מתג עם סמל סימון מותאם אישית.

צבעים מותאמים אישית

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

@Composable
fun SwitchWithCustomColors() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        colors = SwitchDefaults.colors(
            checkedThumbColor = MaterialTheme.colorScheme.primary,
            checkedTrackColor = MaterialTheme.colorScheme.primaryContainer,
            uncheckedThumbColor = MaterialTheme.colorScheme.secondary,
            uncheckedTrackColor = MaterialTheme.colorScheme.secondaryContainer,
        )
    )
}
Switch.kt

ההטמעה הזו נראית כך:

איור 5. מתג עם צבעים מותאמים אישית.

מקורות מידע נוספים

• מסמכי העזרה של Material UI