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:

• Attivare o disattivare un elemento.
• Seleziona tra più opzioni in un elenco.
• Indicano accordo o accettazione.

Anatomia

Una casella di controllo è costituita dai seguenti elementi:

• Box: il contenitore della casella di controllo.
• Segno di spunta: l'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ò trovarsi in uno dei tre stati seguenti:

• Non selezionata: la casella di controllo non è selezionata. La scatola è vuota.
• Indeterminato: la casella di controllo è in uno stato indeterminato. La casella contiene un trattino.
• Selezionata: 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 l'elemento componibile Checkbox per creare una casella di controllo nella tua app. Ci sono solo alcuni parametri chiave da tenere a mente:

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

Il seguente snippet mostra come utilizzare il 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 non è selezionata. Quando l'utente fa clic sulla casella di controllo, la funzione lambda onCheckedChange aggiorna lo stato checked.

Risultato

Questo esempio produce il seguente componente quando non è selezionato:

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

Esempio avanzato

Di seguito è riportato un esempio più complesso di come implementare le caselle di controllo nella tua 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

Ecco alcuni punti da tenere presente in questo esempio:

• Gestione dello stato:
  • childCheckedStates: un elenco di valori booleani che utilizza mutableStateOf() per monitorare lo stato di selezione di ogni casella di controllo secondaria.
  • parentState: un ToggleableState il cui valore deriva dagli stati delle caselle di controllo secondarie.
• Componenti UI:
  • TriStateCheckbox: è necessario per la casella di controllo principale, in quanto ha un parametro state che consente di impostarla su indeterminato.
  • Checkbox: utilizzato per ogni casella di controllo secondaria con lo stato collegato all'elemento corrispondente in childCheckedStates.
  • Text: mostra etichette e messaggi ("Seleziona tutto", "Opzione X", "Tutte le opzioni selezionate").
• Logica:
  • L'attributo onClick della casella di controllo principale aggiorna tutte le caselle di controllo secondarie con lo stato opposto a quello principale corrente.
  • La proprietà onCheckedChange di ogni casella di controllo secondaria aggiorna lo stato corrispondente nell'elenco childCheckedStates.
  • Il codice mostra "All options selected" quando tutte le caselle di controllo secondarie sono selezionate.

Risultato

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

Analogamente, ecco come appare il 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