Le composant Switch
permet aux utilisateurs de basculer entre deux états: coché
et décochée. Dans votre application, vous pouvez utiliser un commutateur pour permettre à l'utilisateur d'effectuer l'une des opérations
suivantes:
- Activez ou désactivez un paramètre.
- Activer ou désactiver une fonctionnalité
- Sélectionnez une option.
Ce composant est constitué de deux parties: le pouce et la piste. Le pouce est l'élément déplaçable et la piste est en arrière-plan. L'utilisateur peut faire glisser le curseur vers la gauche ou la droite pour changer l'état de l'interrupteur. Ils peuvent également appuyer sur l'icône pour le cocher et l'effacer.
![Exemples du composant "Bouton bascule" en mode clair et en mode sombre.](https://developer.android.com/static/develop/ui/compose/images/components/switches.png?authuser=9&hl=fr)
Implémentation de base
Consultez la documentation de référence sur Switch
pour obtenir une définition complète de l'API. Les éléments suivants sont
certains des paramètres clés que
vous pourriez avoir besoin d'utiliser:
checked
: état initial du bouton bascule.onCheckedChange
: rappel appelé lorsque l'état de la les changements de commutateur.enabled
: indique si le bouton est activé ou désactivé.colors
: couleurs utilisées pour le commutateur.
L'exemple suivant est une implémentation minimale du composable Switch
.
@Composable fun SwitchMinimalExample() { var checked by remember { mutableStateOf(true) } Switch( checked = checked, onCheckedChange = { checked = it } ) }
Cette implémentation se présente comme suit lorsque la case est décochée:
![Bouton bascule de base non coché](https://developer.android.com/static/develop/ui/compose/images/components/switch-deactivated.png?authuser=9&hl=fr)
Voici l'apparence quand la case est cochée:
![Un commutateur de base coché.](https://developer.android.com/static/develop/ui/compose/images/components/switch.png?authuser=9&hl=fr)
Implémentation avancée
Les principaux paramètres à utiliser pour implémenter une configuration plus avancée sont les suivants:
thumbContent
: permet de personnaliser l'apparence du pouce quand il est vérifié.colors
: utilisez cette option pour personnaliser la couleur du titre et du curseur.
Pouce personnalisée
Vous pouvez transmettre n'importe quel composable pour le paramètre thumbContent
afin de créer un composable personnalisé.
le pouce. Voici un exemple de commutateur utilisant une icône personnalisée pour son
pouce:
@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 } ) }
Dans cette implémentation, l'apparence décochée est identique à l'exemple dans la section précédente. Toutefois, une fois cochée, cette implémentation apparaît comme ce qui suit:
![Bouton bascule utilisant le paramètre thumbContent pour afficher une icône personnalisée lorsqu'il est coché.](https://developer.android.com/static/develop/ui/compose/images/components/switch-icon.png?authuser=9&hl=fr)
Couleurs personnalisées
L'exemple suivant montre comment utiliser le paramètre "colors" pour : changer la couleur du curseur et de la trajectoire d'un contacteur, en tenant compte du fait que est cochée.
@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, ) ) }
Cette implémentation est la suivante :
![Interrupteur qui utilise le paramètre "Colors" pour afficher un commutateur avec des couleurs personnalisées pour le curseur et la punaise.](https://developer.android.com/static/develop/ui/compose/images/components/switch-colors.png?authuser=9&hl=fr)