Changer

Le composant Switch permet aux utilisateurs de basculer entre deux états : coché et non coché. Dans votre application, vous pouvez utiliser un bouton bascule pour permettre à l'utilisateur d'effectuer l'une des actions 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.

Figure 1. Le composant "switch".

Implémentation de base

Consultez la documentation de référence sur Switch pour obtenir une définition complète de l'API. Voici quelques-uns des principaux paramètres que vous devrez peut-être utiliser :

• checked: état initial du bouton bascule.
• onCheckedChange: rappel appelé lorsque l'état de la 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
        }
    )
}
Switch.kt

Cette implémentation se présente comme suit lorsque la case est décochée:

Figure 2. Bouton désactivé.

Voici l'apparence quand la case est cochée:

Figure 3. Bouton bascule activé.

Implémentation avancée

Les principaux paramètres que vous pouvez utiliser lors de l'implémentation d'un bouton plus avancé sont les suivants :

• thumbContent : permet de personnaliser l'apparence du curseur lorsqu'il est coché.
• colors: utilisez cette option pour personnaliser la couleur du titre et du curseur.

Miniature personnalisée

Vous pouvez transmettre n'importe quel composable pour le paramètre thumbContent afin de créer un curseur personnalisé. 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
        }
    )
}
Switch.kt

Dans cette implémentation, l'apparence de la case à cocher non cochée est identique à celle de l'exemple de la section précédente. Toutefois, une fois cochée, cette implémentation apparaît comme ce qui suit:

Figure 4. Un bouton avec une icône cochée personnalisée.

Couleurs personnalisées

L'exemple suivant montre comment utiliser le paramètre "colors" pour modifier la couleur du curseur et du rail d'un bouton, en tenant compte de l'état de ce bouton.

@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

Cette implémentation est la suivante :

Figure 5 : Un bouton avec des couleurs personnalisées.

Ressources supplémentaires

• Documentation sur les interfaces utilisateur Material