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.
  • Activez ou désactivez une fonctionnalité.
  • Sélectionnez une option.

Le composant se compose de deux parties: le curseur et le rail. Le bouton est la partie du bouton poussoir que vous pouvez faire glisser, et le rail 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. Ils peuvent également appuyer sur le bouton pour le cocher et le décocher.

Exemples du composant Switch en mode clair et sombre.
Figure 1. Composant "Switch" (Contacteur).

Implémentation de base

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

  • checked: état initial du commutateur.
  • onCheckedChange: rappel appelé lorsque l'état du bouton bascule change.
  • enabled: indique si l'interrupteur est activé ou désactivé.
  • colors: couleurs utilisées pour le bouton.

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 si la case n'est pas cochée:

Un bouton de base non coché.
Figure 2. Un bouton bascule non coché

Voici à quoi elle ressemble lorsqu'elle est cochée:

Bouton bascule de base activé.
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: permet de personnaliser la couleur du canal 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 bouton 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 de la case à cocher non cochée est identique à celle de l'exemple de la section précédente. Toutefois, lorsque vous la vérifiez, cette implémentation se présente comme suit:

Bouton qui utilise le paramètre thumbContent pour afficher une icône personnalisée lorsqu'il est activé.
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 :

Bouton qui utilise le paramètre "colors" pour afficher un bouton avec des couleurs personnalisées pour le bouton et le point.
Figure 5 : Un bouton avec des couleurs personnalisées.

Ressources supplémentaires