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

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

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

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

הטמעה בסיסית

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

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

הדוגמה הבאה היא הטמעה מינימלית של הקומפוזיציה Switch.

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

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

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

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

הטמעה מתקדמת

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

• ‫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

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

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

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