Kästchen

Über Kästchen können Nutzer ein oder mehrere Elemente aus einer Liste auswählen. Sie können ein Kästchen verwenden, damit Nutzer Folgendes tun können:

• Ein Element aktivieren oder deaktivieren
• Mehrere Optionen aus einer Liste auswählen
• Zustimmung oder Akzeptanz angeben

Anatomie

Ein Kästchen besteht aus den folgenden Elementen:

• Kästchen: Dies ist der Container für das Kästchen.
• Häkchen: Dies ist der visuelle Indikator, der angibt, ob das Kästchen ausgewählt ist oder nicht.
• Label: Dies ist der Text, der das Kästchen beschreibt.

Status

Ein Kästchen kann einen von drei Status haben:

• Nicht ausgewählt: Das Kästchen ist nicht ausgewählt. Das Kästchen ist leer.
• Unbestimmt: Das Kästchen befindet sich in einem unbestimmten Status. Das Kästchen enthält einen Strich.
• Ausgewählt: Das Kästchen ist ausgewählt. Das Kästchen enthält ein Häkchen.

Die folgende Abbildung zeigt die drei Status eines Kästchens.

Implementierung

Mit der zusammensetzbaren Funktion Checkbox können Sie in Ihrer App ein Kästchen erstellen. Dabei sind nur wenige wichtige Parameter zu beachten:

• checked: Der boolesche Wert, der angibt, ob das Kästchen ausgewählt ist oder nicht.
• onCheckedChange(): Die Funktion, die die App aufruft, wenn der Nutzer auf das Kästchen tippt.

Das folgende Snippet zeigt, wie die zusammensetzbare Funktion Checkbox verwendet wird:

@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

Erklärung

Mit diesem Code wird ein Kästchen erstellt, das anfangs nicht ausgewählt ist. Wenn der Nutzer auf das Kästchen klickt, aktualisiert die Lambda-Funktion onCheckedChange den Status checked.

Ergebnis

Dieses Beispiel erzeugt die folgende Komponente, wenn sie nicht ausgewählt ist:

So sieht dasselbe Kästchen aus, wenn es ausgewählt ist:

Erweitertes Beispiel

Das folgende Beispiel ist komplexer und zeigt, wie Sie Kästchen in Ihrer App implementieren können. In diesem Snippet gibt es ein übergeordnetes Kästchen und eine Reihe untergeordneter Kästchen. Wenn der Nutzer auf das übergeordnete Kästchen tippt, wählt die App alle untergeordneten Kästchen aus.

@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

Erklärung

Beachten Sie in diesem Beispiel Folgendes:

• Statusverwaltung:
  • childCheckedStates: Eine Liste boolescher Werte, die mit mutableStateOf() den ausgewählten Status jedes untergeordneten Kästchens verfolgen.
  • parentState: Ein ToggleableState, dessen Wert von den Status der untergeordneten Kästchen abgeleitet wird.
• UI-Komponenten:
  • TriStateCheckbox: Ist für das übergeordnete Kästchen erforderlich, da es einen state-Parameter hat, mit dem Sie es auf „unbestimmt“ setzen können.
  • Checkbox: Wird für jedes untergeordnete Kästchen verwendet, wobei der Status mit dem entsprechenden Element in childCheckedStates verknüpft ist.
  • Text: Zeigt Labels und Nachrichten an („Alle auswählen“, „Option X“, „Alle Optionen ausgewählt“).
• Logik:
  • Die onClick-Funktion des übergeordneten Kästchens aktualisiert alle untergeordneten Kästchen auf den entgegengesetzten Status des aktuellen übergeordneten Status.
  • Die onCheckedChange-Funktion jedes untergeordneten Kästchens aktualisiert den entsprechenden Status in der Liste childCheckedStates.
  • Der Code zeigt „All options selected“ an, wenn alle untergeordneten Kästchen ausgewählt sind.

Ergebnis

Dieses Beispiel erzeugt die folgende Komponente, wenn alle Kästchen nicht ausgewählt sind.

So sieht die Komponente aus, wenn alle Optionen ausgewählt sind, z. B. wenn der Nutzer auf „Alle auswählen“ tippt:

Wenn nur eine Option ausgewählt ist, zeigt das übergeordnete Kästchen den unbestimmten Status an:

Zusätzliche Ressourcen

• Kästchen in Material Design