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 :

  • Activer ou désactiver un paramètre.
  • Activer ou désactiver une fonctionnalité.
  • Sélectionner une option.

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

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

Implémentation de base

Consultez la documentation de référence 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 du bouton bascule change.
  • enabled: indique si le bouton bascule est activé ou désactivé.
  • colors: couleurs utilisées pour le bouton bascule.

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 s'affiche comme suit lorsqu'elle est décochée :

Un bouton bascule de base qui n'est pas coché.
Figure 2. Un bouton bascule décoché.

Voici comment il s'affiche lorsqu'il est coché :

Bouton bascule de base activé.
Figure 3. Un bouton bascule coché.

Implémentation avancée

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

  • thumbContent: permet de personnaliser l'apparence du curseur lorsqu'il est coché.
  • colors: permet de personnaliser la couleur de la piste et du curseur.

Curseur personnalisé

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

Dans cette implémentation, l'apparence dé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 s'affiche comme suit :

Un bouton bascule qui utilise le paramètre thumbContent pour afficher une icône personnalisée lorsqu'il est activé.
Figure 4. Un bouton bascule 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 de la piste d'un bouton bascule, en tenant compte du fait que le bouton bascule est coché ou non.

@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 s'affiche comme suit :

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

Ressources supplémentaires