Changer

Le composant Switch permet aux utilisateurs de basculer entre deux états : coché et décoché. Dans votre application, vous pouvez utiliser un bouton bascule 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.

Le composant comporte deux parties : le curseur et la piste. Le curseur est la partie déplaçable du commutateur, et la piste est l'arrière-plan. L'utilisateur peut faire glisser le curseur vers la gauche ou vers la droite pour modifier l'état du bouton bascule. Il peut également appuyer sur le bouton pour le vérifier et l'effacer.

Exemples du composant Switch en mode clair et en mode sombre.
Figure 1. Le composant de contacteur.

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 paramètres clés que vous devrez peut-être utiliser :

  • checked : état initial du commutateur.
  • onCheckedChange : rappel appelé lorsque l'état du bouton bascule change.
  • enabled : indique si le bouton bascule 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 lorsqu'elle n'est pas cochée :

Un commutateur de base qui n'est pas coché.
Figure 2. Bouton bascule désactivé.

Voici l'apparence de la case lorsqu'elle est cochée :

Un Switch de base activé.
Figure 3. Bouton bascule activé.

Implémentation avancée

Voici les principaux paramètres que vous pouvez utiliser lors de l'implémentation d'un commutateur plus avancé :

  • thumbContent : permet de personnaliser l'apparence du curseur lorsqu'il est coché.
  • colors : permet de personnaliser la couleur de la piste 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 qui utilise une icône personnalisée pour son curseur :

@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 non cochée est la même que dans l'exemple de la section précédente. Toutefois, lorsqu'elle est cochée, cette implémentation est la suivante :

Un commutateur qui utilise le paramètre thumbContent pour afficher une icône personnalisée lorsqu'il est activé.
Figure 4. Un commutateur avec une icône personnalisée pour l'état activé.

Couleurs personnalisées

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

@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 :

Un commutateur qui utilise le paramètre "colors" pour afficher un commutateur avec des couleurs personnalisées pour le curseur et la piste.
Figure 5 : Un bouton bascule avec des couleurs personnalisées.

Ressources supplémentaires