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.
  • Faites votre choix parmi plusieurs options dans une liste.
  • Indiquez votre accord ou votre acceptation.

Anatomie

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

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

États

Une case à cocher peut être associée à l'un des trois états suivants:

  • Non cochée: la case n'est pas cochée. Le champ est vide.
  • Indéterminé: la case à cocher est dans un état indéterminé. La zone contient un tiret.
  • Sélectionné: la case est cochée. La case contient une coche.

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

Exemple de composant "Case à cocher" dans chacun de ses trois états: non sélectionné, sélectionné et indéterminé.
Figure 1. Les trois états d'une case à cocher. Non sélectionnée, indéterminée et sélectionnée.

Implémentation

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

  • checked: valeur booléenne indiquant 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 qui est initialement décochée. 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 lorsque la case n'est pas cochée:

Case décochée avec un libellé. Le message "La case à cocher n'est pas cochée" s'affiche en dessous.
Figure 2. Case décochée

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

Case cochée avec un libellé Le texte en dessous indique "Case cochée".
Figure 3. Case 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 quelques points à retenir de cet exemple:

  • Gestion des états :
    • childCheckedStates: liste de valeurs booléennes utilisant mutableStateOf() pour suivre l'état coché de chaque case enfant.
    • parentState: ToggleableState dont la valeur dérive des états des cases à cocher enfants.
  • Composants de l'interface utilisateur :
    • TriStateCheckbox: est 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 associé à 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 :
    • L'onClick de la case à cocher parente met à jour toutes les cases à cocher enfants de l'état opposé à l'état parent actuel.
    • Le 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 à cocher sont décochées.

Série de cases à cocher avec libellé décochées et libellées.
Figure 4. Cases à cocher décochées

De même, voici à quoi ressemble le composant lorsque toutes les options sont cochées, comme lorsque l'utilisateur appuie sur "Tout sélectionner" :

Série de cases à cocher avec un libellé et une coche Le premier est marqué "Tout sélectionner". Sous ces boutons se trouve un composant textuel indiquant "Toutes les options sélectionnées".
Figure 5 : Cases cochées

Lorsqu'une seule option est cochée, la case à cocher "Parent" affiche l'état indéterminé:

Série de cases à cocher libellées et décochées Tous les boutons sont décochés, sauf un. La case "Tout sélectionner" est indéterminée et affiche un tiret.
Figure 6 : Case à cocher indéterminée

Ressources supplémentaires