Kästchen

Mit Kästchen können Nutzer ein oder mehrere Elemente aus einer Liste auswählen. Sie können ein Kästchen verwenden, um dem Nutzer Folgendes zu ermöglichen:

• Aktivieren oder deaktivieren Sie ein Element.
• Aus mehreren Optionen in einer Liste auswählen.
• Zustimmung oder Akzeptanz signalisieren.

Anatomie

Ein Kästchen besteht aus den folgenden Elementen:

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

Bundesstaaten

Ein Kästchen kann einen von drei Status haben:

• Nicht ausgewählt: Das Kästchen ist nicht ausgewählt. Das Feld ist leer.
• Unbestimmt: Das Kästchen befindet sich in einem unbestimmten Zustand. Das Feld enthält einen Bindestrich.
• 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 ein Kästchen in Ihrer App erstellen. Dabei sind nur einige wichtige Parameter zu beachten:

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

Das folgende Snippet zeigt, wie Sie die zusammensetzbare Funktion Checkbox verwenden:

@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 angeklickt ist. Wenn der Nutzer auf das Kästchen klickt, aktualisiert der Lambda-Ausdruck onCheckedChange den Status checked.

Ergebnis

In diesem Beispiel wird die folgende Komponente erzeugt, wenn das Häkchen entfernt wird:

Und so sieht das Kästchen aus, wenn es angeklickt wurde:

Erweitertes Beispiel

Das folgende Beispiel zeigt, wie Sie Kästchen in Ihrer App implementieren können. In diesem Snippet gibt es ein übergeordnetes Kästchen und eine Reihe von untergeordneten Kästchen. Wenn der Nutzer das übergeordnete Kästchen antippt, werden alle untergeordneten Kästchen aktiviert.

@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

In diesem Beispiel sind mehrere Punkte zu beachten:

• Zustandsverwaltung:
  • childCheckedStates: Eine Liste von booleschen Werten, die mutableStateOf() verwenden, um den Status der einzelnen untergeordneten Kästchen zu verfolgen.
  • parentState: Ein ToggleableState, dessen Wert sich aus den Status der untergeordneten Kästchen ableitet.
• 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, dessen 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:
  • Das onClick des übergeordneten Kästchens aktualisiert alle untergeordneten Kästchen auf das Gegenteil des aktuellen übergeordneten Status.
  • Das onCheckedChange-Attribut jedes untergeordneten Kästchens aktualisiert den entsprechenden Status in der childCheckedStates-Liste.
  • Der Code zeigt „All options selected“ an, wenn alle untergeordneten Kästchen angeklickt sind.

Ergebnis

In diesem Beispiel wird die folgende Komponente erzeugt, wenn alle Kästchen deaktiviert 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, wird das übergeordnete Kästchen im unbestimmten Zustand angezeigt:

Zusätzliche Ressourcen

• Material Design-Kästchen