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

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

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

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

@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