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

הרכיב 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. מתג עם סמל סימון מותאם אישית.

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

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

@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