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

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

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

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

הטמעה בסיסית

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

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

הדוגמה הבאה היא הטמעה מינימלית של הרכיב הניתן לקישור Switch.

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

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

כך נראה היישום הזה כשהתיבה לא מסומנת:

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

הטמעה מתקדמת

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

• ‫thumbContent: משמש להתאמה אישית של מראה הלחצן כשהוא מסומן.
• ‫colors: משמש להתאמה אישית של צבע הפס והידית.

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

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

@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

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

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

בדוגמה הבאה אפשר לראות איך משתמשים בפרמטר 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

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

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

• מסמכי תיעוד של Material UI