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

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

'לייק' מותאם אישית

אפשר להעביר כל תוכן קומפוזבילי לפרמטר 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

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

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

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

היישום הזה נראה כך:

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

• מסמכי ממשק המשתמש של Material