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 l'accord ou l'acceptation.
Anatomie
Une case à cocher se compose des éléments suivants:
- Box: il s'agit du conteneur de la case à cocher.
- Vérifier: indicateur visuel qui indique si la case est cochée ou non.
- Libellé: il s'agit du texte décrivant la case à cocher.
États
Une case à cocher peut avoir l'un des trois états suivants:
- Non sélectionné: la case n'est pas cochée. La zone est vide.
- Indeterminate: l'état de la case à cocher est indéterminé. La boîte 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.
Implémentation
Vous pouvez utiliser le composable Checkbox
pour créer une case à cocher dans votre application. Quelques paramètres clés sont à garder à l'esprit:
checked
: valeur booléenne qui indique si la case est cochée ou décochée.onCheckedChange()
: fonction appelée par l'application lorsque l'utilisateur clique 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" ) }
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
Dans cet exemple, le composant suivant s'affiche lorsque cette case est décochée:
Et voici comment la même case à cocher apparaît 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 y a une case à cocher parente et une série de cases à cocher enfants. Lorsque l'utilisateur appuie sur la case parent, 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") } }
Explication
Voici quelques points à prendre en compte à partir de cet exemple:
- Gestion des états :
childCheckedStates
: liste de valeurs booléennes utilisantmutableStateOf()
pour suivre l'état coché de chaque case à cocher enfant.parentState
:ToggleableState
dont la valeur provient 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ètrestate
qui vous permet de la définir comme indéterminée.Checkbox
: utilisé pour chaque case à cocher enfant avec son état associé à l'élément correspondant danschildCheckedStates
.Text
: affiche les libellés et les messages ("Tout sélectionner", "Option X", "Toutes les options sélectionnées").
- Logique :
- Le paramètre
onClick
de la case à cocher parente met à jour toutes les cases à cocher enfants à l'opposé de l'état parent actuel. - Le
onCheckedChange
de chaque case à cocher enfant met à jour son état correspondant dans la listechildCheckedStates
. - Le code affiche "
All options selected
" lorsque toutes les cases enfants sont cochées.
- Le paramètre
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 apparaît lorsque toutes les options sont cochées, comme lorsque l'utilisateur appuie sur "Tout sélectionner" :
Lorsqu'une seule option est cochée, la case parente affiche l'état indéterminé: