Casilla de verificación

Las casillas de verificación permiten a los usuarios seleccionar 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.
• Seleccionar entre varias opciones de una lista.
• Indicar si está de acuerdo o se acepta.

Nota: Usa casillas de verificación en lugar de interruptores o botones de selección si se pueden seleccionar varias opciones de una lista

Anatomía

Una casilla de verificación consta de los siguientes elementos:

• Box: Este es el contenedor de la casilla de verificación.
• Check: Es el indicador visual que muestra si la casilla de verificación está seleccionada o no.
• Etiqueta (Label): Este es el texto que describe la casilla de verificación.

Estados

Una casilla de verificación puede tener uno de estos tres estados:

• Sin seleccionar: La casilla de verificación no está seleccionada. El cuadro está vacío.
• Indeterminate: La casilla de verificación se encuentra en un estado indeterminado. La caja tiene un guion.
• Seleccionada: La casilla de verificación aparece seleccionada. El cuadro contiene una marca de verificación.

En la siguiente imagen, se muestran los tres estados de una casilla de verificación.

Figura 1: Los tres estados de una casilla de verificación. No seleccionado, indeterminado y seleccionado.

Implementación

Puedes usar el elemento componible Checkbox para crear una casilla de verificación en tu app. Solo hay algunos parámetros clave que debes tener en cuenta:

• 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"
    )
}
Checkbox.kt

Explicación

Este código crea una casilla de verificación que no está marcada 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:

Figura 2: Casilla de verificación desmarcada

Y así es como aparece la misma casilla de verificación cuando se marca:

Figura 3: Casilla de verificación marcada

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")
    }
}
Checkbox.kt

Explicación

Los siguientes son varios puntos que debes tener en cuenta de este ejemplo:

• Administración del estado:
  • childCheckedStates: Es una lista de booleanos que usa mutableStateOf() para hacer un seguimiento del estado de marcado de cada casilla de verificación secundaria.
  • parentState: Es una ToggleableState 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ámetro state que te permite configurarla como indeterminada.
  • Checkbox: Se usa para cada casilla de verificación secundaria con su estado vinculado al elemento correspondiente en childCheckedStates.
  • Text: Muestra las etiquetas y los 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 lista childCheckedStates.
  • El código muestra "All options selected" cuando se marcan todas las casillas de verificación secundarias.

Nota: Si quieres tener una casilla de verificación con un estado indeterminado, debes usar TriStateCheckbox. Esto se debe a que tiene un parámetro state de tipo ToggleState, mientras que Checkbox no lo tiene.

Resultado

En este ejemplo, se produce el siguiente componente cuando todas las casillas de verificación están desmarcadas.

Figura 4: Casillas de verificación desmarcadas

Del mismo modo, así es como aparece el componente cuando están marcadas todas las opciones, como cuando el usuario presiona para seleccionar todas:

Figura 5: Casillas de verificación marcadas

Cuando solo se marca una opción, la casilla de verificación superior muestra el estado indeterminado:

Figura 6: Casilla de verificación Indeterminate

Recursos adicionales

• Casillas de verificación de Material Design