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

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

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

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

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

הטמעה בסיסית

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

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

הדוגמה הבאה היא הטמעה מינימלית של הקומפוזיציה 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