Changer

Le composant Switch permet aux utilisateurs de basculer entre deux états: coché ou non. 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.

Le composant comporte deux parties: le curseur et la piste. Le pouce 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. Il peut également appuyer sur le bouton bascule pour le vérifier et l’effacer.

Implémentation de base

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

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

Voici l'apparence lorsqu'elle est cochée:

Implémentation avancée

Les principaux paramètres que vous pouvez utiliser lors de la mise en œuvre d'un commutateur 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 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 pouce 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 non cochée est identique à l'exemple de la section précédente. Toutefois, lorsque cette option est cochée, cette implémentation se présente comme suit:

Couleurs personnalisées

L'exemple suivant montre comment utiliser le paramètre "colors" (couleurs) pour modifier la couleur du curseur et de la piste d'un bouton bascule, en tenant compte ou non 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 :

Ressources supplémentaires

• Documentation sur les interfaces utilisateur Material