CSA0X: O hazlo con Checkbox

tags: blog, compose, csa

La función Checkbox

Similar al conmutador, tenemos la clásica casilla de verificación es un componente muy usado en muchos escenarios. Podemos usar la función componible Checkbox, que nos proveerá la opción de alternar entre dos estados, marcado y no marcado. Para usarlo, deberemos indicar el estado inicial, además de la función que responderá al evento de cambiar de estado.

Checkbox(
    checked = true,
    onCheckedChange = { /*TODO*/ }
)

La lista de atributos de Checkbox es la que sigue:

@Composable
fun Checkbox(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    colors: CheckboxColors = CheckboxDefaults.colors()
)

• checked: Indica si está verificado o no.
• onCheckedChange: Evento que responde al cambio de estado entre verificado o no.
• modifier: Modificador aplicado al verificador.
• enabled: Define si el verificador está o no habilitado.
• interactonState: Estados de interacción del verificador.
• colors: Colores aplicados al verificador. Por defecto será el color secundario de la aplicación el que se aplique.

Cómo se puede apreciar, es exactamente igual a Switch salvo por el atributo colors que en este caso de un CheckboxColors

Por lo tanto, gestionar el cambio de estado de un Checkbox es idéntico al de un Switch

fun CheckBoxStateExample() {
    val isChecked = remember {
        mutableStateOf(false)
    }
    Checkbox(
        checked = isChecked.value,
        onCheckedChange = { checked ->
            isChecked.value = checked
        }
    )
}

Coloreemos al gusto nuestro verificador

Podemos darle color a los diferentes estados del Checkbox además de el tick de verificación:

@Composable
fun CheckBoxColouredExample() {
    val isChecked = remember {
        mutableStateOf(false)
    }
    Checkbox(
        checked = isChecked.value,
        onCheckedChange = { checked ->
            isChecked.value = checked
        },
        colors = CheckboxDefaults.colors(
            checkedColor = Color.Blue,
            uncheckedColor = Color.Cyan,
            checkmarkColor = Color.Green,
            disabledColor = Color.LightGray,
        )
    )
}

Pongamos una etiqueta para dar contexto

A diferencia del componente XML, Checkbox no tiene la posibilidad innata de incluirle una etiqueta para dar contexto de lo que se está verificando. Por lo tanto, es necesario componer un vista usando la función Text para ello:

@Composable
fun LabeledCheckboxExample(){
    val isChecked = remember { mutableStateOf(false) }
    Row (modifier = Modifier.clickable(onClick = {
        isChecked.value = !isChecked.value
    })) {
        Checkbox(
            checked = isChecked.value,
            onCheckedChange = { checked ->
                isChecked.value = checked
            }
        )
        Text(
            text = "Recibir notificaciones",
            modifier = Modifier.padding(start = 8.dp)
        )
    }
    
}