Las casillas de verificación permiten que los usuarios seleccionen uno o más elementos de una lista. Puedes usar una casilla de verificación para permitir que el usuario haga lo siguiente:
- Activa o desactiva un elemento.
- Selecciona entre varias opciones en una lista.
- Indica si estás de acuerdo o aceptación.
Anatomía
Una casilla de verificación consta de los siguientes elementos:
- Box: Este es el contenedor de la casilla de verificación.
- Marca de verificación: Es el indicador visual que muestra si la casilla de verificación está seleccionada o no.
- Etiqueta: Es el texto que describe la casilla de verificación.
Estados
Las casillas de verificación pueden tener uno de estos tres estados:
- Sin seleccionar: La casilla de verificación no está seleccionada. La caja está vacía.
- Indeterminate: La casilla de verificación está en un estado indeterminado. La caja contiene un guion.
- Seleccionado: La casilla de verificación está seleccionada. El cuadro contiene una marca de verificación.
En la siguiente imagen, se muestran los tres estados de una casilla de verificación.
Implementación
Puedes usar el elemento componible Checkbox
para crear una casilla de verificación en tu app. Debes tener en cuenta algunos parámetros clave:
checked
: El valor booleano que captura si la casilla de verificación está marcada o no.onCheckedChange()
: Es la función a la que llama la app cuando el usuario presiona la casilla de verificación.
En el siguiente fragmento, se muestra cómo usar el elemento Checkbox
componible:
@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" ) }
Explicación
Este código crea una casilla de verificación que está desmarcada inicialmente. Cuando el usuario hace clic en la casilla de verificación, la lambda onCheckedChange
actualiza el estado checked
.
Resultado
En este ejemplo, se produce el siguiente componente cuando no se marca:
![Una casilla de verificación desmarcada con una etiqueta. El texto debajo dice "La casilla de verificación no está marcada"](https://developer.android.com/static/develop/ui/compose/images/components/checkbox-minimal-unchecked.png?hl=es-419)
Y así es como aparece la misma casilla de verificación cuando está marcada:
![Una casilla de verificación marcada con una etiqueta. El texto debajo dice "La casilla de verificación está marcada"](https://developer.android.com/static/develop/ui/compose/images/components/checkbox-minimal-checked.png?hl=es-419)
Ejemplo avanzado
El siguiente es un ejemplo más complejo de cómo puedes implementar casillas de verificación en tu app. En este fragmento, hay una casilla de verificación superior y una serie de casillas de verificación secundarias. Cuando el usuario presiona la casilla de verificación superior, la app marca todas las casillas de verificación secundarias.
@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") } }
Explicación
A continuación, se incluyen varios puntos que debes tener en cuenta en este ejemplo:
- Administración del estado:
childCheckedStates
: Es una lista de valores booleanos que usamutableStateOf()
para hacer un seguimiento del estado activado de cada casilla de verificación secundaria.parentState
: Es unToggleableState
cuyo valor deriva de los estados de las casillas de verificación secundarias.
- Componentes de la IU:
TriStateCheckbox
: Es necesaria para la casilla de verificación superior, ya que tiene un parámetrostate
que te permite establecerla como indeterminada.Checkbox
: Se usa para cada casilla de verificación secundaria con su estado vinculado al elemento correspondiente enchildCheckedStates
.Text
: Muestra etiquetas y mensajes (“Seleccionar todo”, “Opción X”, “Todas las opciones seleccionadas”).
- Lógica:
- El
onClick
de la casilla de verificación superior actualiza todas las casillas de verificación secundarias a lo opuesto al estado superior actual. - El
onCheckedChange
de cada casilla de verificación secundaria actualiza su estado correspondiente en la listachildCheckedStates
. - El código muestra “
All options selected
” cuando todas las casillas de verificación secundarias están marcadas.
- El
Resultado
En este ejemplo, se produce el siguiente componente cuando todas las casillas de verificación están desmarcadas.
![Una serie de casillas de verificación etiquetadas sin marcar y con una etiqueta.](https://developer.android.com/static/develop/ui/compose/images/components/checkbox-parent-unchecked.png?hl=es-419)
Del mismo modo, así se ve el componente cuando se marcan todas las opciones, como cuando el usuario presiona Seleccionar todo:
![Una serie de casillas de verificación con etiquetas marcadas con una etiqueta. La primera está marcada como "seleccionar todo". Debajo de ellos, hay un componente de texto que dice "todas las opciones seleccionadas".](https://developer.android.com/static/develop/ui/compose/images/components/checkbox-parent-checked.png?hl=es-419)
Cuando solo se marca una opción, la casilla de verificación superior muestra el estado indeterminado:
![Una serie de casillas de verificación etiquetadas sin marcar y con una etiqueta. Todas menos una está desmarcada. La casilla de verificación etiquetada como “seleccionar todo” es indeterminada y muestra un guion.](https://developer.android.com/static/develop/ui/compose/images/components/checkbox-parent-indeterminate.png?hl=es-419)