Changer

Le composant Switch permet aux utilisateurs de basculer entre deux états : coché et décoché. Dans votre application, vous pouvez utiliser un commutateur 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 commutateur, 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 commutateur. Il peut également appuyer sur le commutateur pour le cocher et le décocher.

Figure 1. Le composant de commutateur.

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 commutateur change.
• enabled: indique si le commutateur 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 s'affiche comme suit lorsqu'elle est décochée :

Figure 2. Un commutateur décoché.

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

Figure 3. Un commutateur coché.

Implémentation avancée

Les principaux paramètres que vous pouvez utiliser lors de l'implémentation d'un commutateur 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 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
        }
    )
}
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'il est coché, cette implémentation s'affiche comme suit :

Figure 4. Un commutateur 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 commutateur, en tenant compte du fait que le commutateur 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 :

Figure 5. Un commutateur avec des couleurs personnalisées.

Ressources supplémentaires

• Documentation sur les interfaces utilisateur Material