Casella di controllo

Le caselle di controllo consentono agli utenti di selezionare uno o più elementi da un elenco. Puoi utilizzare una casella di controllo per consentire all'utente di eseguire le seguenti operazioni:

• Attiva o disattiva un elemento.
• Seleziona da più opzioni in un elenco.
• Indicare il consenso o l'accettazione.

Anatomia

Una casella di controllo è costituita dai seguenti elementi:

• Box: questo è il contenitore della casella di controllo.
• Verifica: si tratta dell'indicatore visivo che mostra se la casella di controllo è selezionata o meno.
• Etichetta: è il testo che descrive la casella di controllo.

Stati

Una casella di controllo può avere uno dei tre seguenti stati:

• Deselezionato: la casella di controllo non è selezionata. La casella è vuota.
• Indeterminato: la casella di controllo è in uno stato indeterminato. che contiene un trattino.
• Selezionati: la casella di controllo è selezionata. La casella contiene un segno di spunta.

L'immagine seguente mostra i tre stati di una casella di controllo.

Implementazione

Puoi utilizzare il componibile Checkbox per creare una casella di controllo nella tua app. Tieni presente solo alcuni parametri chiave:

• checked: il valore booleano che registra se la casella di controllo è selezionata o meno.
• onCheckedChange(): la funzione chiamata dall'app quando l'utente tocca la casella di controllo.

Il seguente snippet mostra come utilizzare l'elemento componibile 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

Spiegazione

Questo codice crea una casella di controllo che inizialmente è deselezionata. Quando l'utente fa clic sulla casella di controllo, il lambda onCheckedChange aggiorna lo stato checked.

Risultato

Se deselezionata, questo esempio produce il seguente componente:

Ecco come appare la stessa casella di controllo quando viene selezionata:

Esempio avanzato

Di seguito è riportato un esempio più complesso di come implementare le caselle di controllo nell'app. In questo snippet sono presenti una casella di controllo principale e una serie di caselle di controllo secondarie. Quando l'utente tocca la casella di controllo principale, l'app seleziona tutte le caselle di controllo secondarie.

@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

Spiegazione

Di seguito sono riportati alcuni punti da tenere presenti in questo esempio:

• Gestione degli stati:
  • childCheckedStates: un elenco di valori booleani che utilizzano mutableStateOf() per monitorare lo stato selezionato di ogni casella di controllo secondaria.
  • parentState: una classe ToggleableState il cui valore deriva dagli stati delle caselle di controllo secondarie.
• Componenti UI:
  • TriStateCheckbox: è necessaria per la casella di controllo principale in quanto ha un parametro state che ti consente di impostarlo come indeterminato.
  • Checkbox: utilizzato per ogni casella di controllo secondaria con il relativo stato collegato all'elemento corrispondente in childCheckedStates.
  • Text: mostra etichette e messaggi ("Seleziona tutto", "Opzione X", "Tutte le opzioni selezionate").
• Logica:
  • La casella di controllo principale onClick aggiorna tutte le caselle di controllo secondarie al contrario dello stato principale corrente.
  • onCheckedChange di ogni casella di controllo secondaria aggiorna lo stato corrispondente nell'elenco childCheckedStates.
  • Il codice visualizza "All options selected" quando tutte le caselle di controllo figlio sono selezionate.

Risultato

Questo esempio produce il seguente componente quando tutte le caselle di controllo sono deselezionate.

Allo stesso modo, questo è l'aspetto del componente quando tutte le opzioni sono selezionate, ad esempio quando l'utente tocca Seleziona tutto:

Quando è selezionata una sola opzione, la casella di controllo principale mostra lo stato indeterminato:

Risorse aggiuntive

• Caselle di controllo di Material Design