Kästchen

Mit Kästchen können Nutzer mindestens einen Artikel aus einer Liste auswählen. Mit einer Kästchenauswahl können Sie Nutzern Folgendes ermöglichen:

• Aktivieren oder deaktivieren Sie einen Artikel.
• Sie können mehrere Optionen in einer Liste auswählen.
• Geben Sie Ihre Zustimmung oder Annahme an.

Hinweis :Verwenden Sie Kästchen anstelle von Schaltern oder Optionsfeldern, wenn Nutzer mehrere Optionen in einer Liste auswählen können.

Anatomie

Ein Kästchen besteht aus den folgenden Elementen:

• Box: Dies ist der Container für das Kästchen.
• Markierung: Diese visuelle Anzeige zeigt an, ob das Kästchen ausgewählt ist oder nicht.
• Label: Dies ist der Text, der das Kästchen beschreibt.

Bundesstaaten

Ein Kästchen kann einen von drei Status haben:

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

Die folgende Abbildung zeigt die drei Status einer Kästchenauswahl.

Abbildung 1: Die drei Status einer Kästchenauswahl. Nicht ausgewählt, unbestimmt und ausgewählt.

Implementierung

Mit dem Checkbox-Element können Sie ein Kästchen in Ihrer App erstellen. Es gibt nur wenige wichtige Parameter, die Sie beachten müssen:

• checked: Gibt an, ob das Kästchen angeklickt ist oder nicht.
• onCheckedChange(): Die Funktion, die die App aufruft, wenn der Nutzer auf das Kästchen tippt.

Das folgende Snippet zeigt, wie die Checkbox-Komposition 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 angeklickt ist. Wenn der Nutzer auf das Kästchen klickt, aktualisiert das onCheckedChange-Lambda den checked-Status.

Ergebnis

In diesem Beispiel wird die folgende Komponente erstellt, wenn das Kästchen nicht angeklickt ist:

Abbildung 2. Kästchen ohne Häkchen

So sieht das Kästchen aus, wenn es angeklickt ist:

Abbildung 3 Kästchen mit Häkchen

Erweitertes Beispiel

Im Folgenden finden Sie ein komplexeres Beispiel dafür, 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 auf das übergeordnete Kästchen tippt, werden in der App 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

Beachten Sie bei diesem Beispiel Folgendes:

• Statusverwaltung:
  • childCheckedStates: Eine Liste von Booleschen Werten, bei denen mutableStateOf() verwendet wird, um den angeklickten Status jeder untergeordneten Kästchenauswahl zu verfolgen.
  • parentState: Ein ToggleableState, dessen Wert aus dem 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 es auf „unbestimmt“ gesetzt werden kann.
  • Checkbox: Wird für jedes untergeordnete Kästchen verwendet, dessen Status mit dem entsprechenden Element in childCheckedStates verknüpft ist.
  • Text: Zeigt Labels und Meldungen an („Alle auswählen“, „Option X“, „Alle Optionen ausgewählt“).
• Logik:
  • Wenn Sie das Kästchen für das übergeordnete Element onClick anklicken, wird der Status aller untergeordneten Elemente auf das Gegenteil des aktuellen Status des übergeordneten Elements gesetzt.
  • Über das onCheckedChange-Attribut der untergeordneten Kästchen wird der entsprechende Status in der Liste childCheckedStates aktualisiert.
  • Im Code wird „All options selected“ angezeigt, wenn alle untergeordneten Kästchen angeklickt sind.

Hinweis: Wenn Sie ein Kästchen mit einem unbestimmten Status haben möchten, müssen Sie TriStateCheckbox verwenden. Das liegt daran, dass state einen ToggleState-Parameter hat, Checkbox hingegen nicht.

Ergebnis

In diesem Beispiel wird die folgende Komponente erstellt, wenn alle Kästchen deaktiviert sind.

Abbildung 4: Kästchen ohne Häkchen

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

Abbildung 5 Angeklickte Kästchen

Wenn nur eine Option angeklickt ist, wird im übergeordneten Kästchen der unbestimmte Status angezeigt:

Abbildung 6: Unbestimmtes Kästchen

Weitere Informationen

• Material Design-Kästchen