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.
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:
Voici l'apparence quand la case est cochée:
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:
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 :