Case à cocher

Les cases à cocher permettent aux utilisateurs de sélectionner un ou plusieurs éléments dans une liste. Vous pouvez utiliser une case à cocher pour permettre à l'utilisateur d'effectuer les opérations suivantes :

• Activez ou désactivez un élément.
• Sélectionnez plusieurs options dans une liste.
• Indiquer un accord ou une acceptation.

Anatomie

Une case à cocher se compose des éléments suivants :

• Box : conteneur de la case à cocher.
• Coche : indicateur visuel qui indique si la case est cochée ou non.
• Libellé : texte qui décrit la case à cocher.

États

Une case à cocher peut se trouver dans l'un des trois états suivants :

• Non sélectionné : la case n'est pas cochée. La boîte est vide.
• Indéterminé : la case à cocher est dans un état indéterminé. La case contient un tiret.
• Selected : la case est cochée. La case est cochée.

L'image suivante illustre les trois états d'une case à cocher.

Implémentation

Vous pouvez utiliser le composable Checkbox pour créer une case à cocher dans votre application. Voici quelques paramètres clés à garder à l'esprit :

• checked : valeur booléenne qui indique si la case est cochée ou non.
• onCheckedChange() : fonction appelée par l'application lorsque l'utilisateur appuie sur la case à cocher.

L'extrait de code suivant montre comment utiliser le composable Checkbox :

@Composable
fun CheckboxMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Row(
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Text(
            "Minimal checkbox"
        )
        Checkbox(
            checked = checked,
            onCheckedChange = { checked = it }
        )
    }

    Text(
        if (checked) "Checkbox is checked" else "Checkbox is unchecked"
    )
}
Checkbox.kt

Explication

Ce code crée une case à cocher qui n'est pas cochée au départ. Lorsque l'utilisateur clique sur la case à cocher, le lambda onCheckedChange met à jour l'état checked.

Résultat

Cet exemple génère le composant suivant lorsqu'il n'est pas coché :

Voici à quoi ressemble la même case à cocher lorsqu'elle est cochée :

Exemple avancé

Voici un exemple plus complexe d'implémentation de cases à cocher dans votre application. Dans cet extrait, il existe une case à cocher parente et une série de cases à cocher enfants. Lorsque l'utilisateur appuie sur la case à cocher parente, l'application coche toutes les cases enfants.

@Composable
fun CheckboxParentExample() {
    // Initialize states for the child checkboxes
    val childCheckedStates = remember { mutableStateListOf(false, false, false) }

    // Compute the parent state based on children's states
    val parentState = when {
        childCheckedStates.all { it } -> ToggleableState.On
        childCheckedStates.none { it } -> ToggleableState.Off
        else -> ToggleableState.Indeterminate
    }

    Column {
        // Parent TriStateCheckbox
        Row(
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Text("Select all")
            TriStateCheckbox(
                state = parentState,
                onClick = {
                    // Determine new state based on current state
                    val newState = parentState != ToggleableState.On
                    childCheckedStates.forEachIndexed { index, _ ->
                        childCheckedStates[index] = newState
                    }
                }
            )
        }

        // Child Checkboxes
        childCheckedStates.forEachIndexed { index, checked ->
            Row(
                verticalAlignment = Alignment.CenterVertically,
            ) {
                Text("Option ${index + 1}")
                Checkbox(
                    checked = checked,
                    onCheckedChange = { isChecked ->
                        // Update the individual child state
                        childCheckedStates[index] = isChecked
                    }
                )
            }
        }
    }

    if (childCheckedStates.all { it }) {
        Text("All options selected")
    }
}
Checkbox.kt

Explication

Voici plusieurs points à noter dans cet exemple :

• Gestion de l'état :
  • childCheckedStates : liste de valeurs booléennes utilisant mutableStateOf() pour suivre l'état de chaque case à cocher enfant.
  • parentState : ToggleableState dont la valeur est dérivée des états des cases à cocher enfants.
• Composants d'interface utilisateur :
  • TriStateCheckbox : nécessaire pour la case à cocher parente, car elle comporte un paramètre state qui vous permet de la définir sur "indéterminé".
  • Checkbox : utilisé pour chaque case à cocher enfant dont l'état est lié à l'élément correspondant dans childCheckedStates.
  • Text : affiche les libellés et les messages ("Tout sélectionner", "Option X", "Toutes les options sélectionnées").
• Logique :
  • La fonction onClick de la case à cocher parente met à jour toutes les cases à cocher enfants pour qu'elles soient à l'opposé de l'état actuel du parent.
  • La fonction onCheckedChange de chaque case à cocher enfant met à jour l'état correspondant dans la liste childCheckedStates.
  • Le code affiche "All options selected" lorsque toutes les cases enfants sont cochées.

Résultat

Cet exemple génère le composant suivant lorsque toutes les cases sont décochées.

De même, voici comment le composant s'affiche lorsque toutes les options sont cochées, par exemple lorsque l'utilisateur appuie sur "Tout sélectionner" :

Lorsqu'une seule option est cochée, la case parente affiche l'état indéterminé :

Ressources supplémentaires

• Cases à cocher Material Design