Changer

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

Ce composant est constitué de deux parties: le pouce et la piste. Le pouce est l'élément déplaçable et la piste est en arrière-plan. L'utilisateur peut faire glisser le curseur vers la gauche ou la droite pour changer l'état de l'interrupteur. Ils peuvent également appuyer sur l'icône pour le cocher et l'effacer.

Figure 1. Le composant "switch".

Implémentation de base

Consultez la documentation de référence sur Switch pour obtenir une définition complète de l'API. Les éléments suivants sont certains des paramètres clés que vous pourriez avoir besoin d'utiliser:

• checked: état initial du bouton bascule.
• onCheckedChange: rappel appelé lorsque l'état de la les changements de commutateur.
• 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 est décochée:

Figure 2. Bouton désactivé.

Voici l'apparence quand la case est cochée:

Figure 3. Un interrupteur coché.

Implémentation avancée

Les principaux paramètres à utiliser pour implémenter une configuration plus avancée sont les suivants:

• thumbContent: permet de personnaliser l'apparence du pouce quand il est vérifié.
• colors: utilisez cette option pour personnaliser la couleur du titre et du curseur.

Pouce personnalisée

Vous pouvez transmettre n'importe quel composable pour le paramètre thumbContent afin de créer un composable personnalisé. le pouce. 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 décochée est identique à l'exemple dans la section précédente. Toutefois, une fois cochée, cette implémentation apparaît comme ce qui suit:

Figure 4. Bouton bascule avec une icône cochée personnalisée

Couleurs personnalisées

L'exemple suivant montre comment utiliser le paramètre "colors" pour : changer la couleur du curseur et de la trajectoire d'un contacteur, en tenant compte du fait que est cochée.

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

Figure 5 : un bouton bascule avec des couleurs personnalisées

Ressources supplémentaires

• Documentation sur les interfaces utilisateur Material