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

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

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

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

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

הטמעה בסיסית

להגדרה מלאה של ה-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

כשהאפשרות הזו לא מסומנת, ההטמעה נראית כך:

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

הטמעה מתקדמת

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

• 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