Kästchen

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

• Aktivieren oder deaktivieren Sie einen Artikel.
• Es stehen mehrere Optionen zur Auswahl.
• die auf eine Vereinbarung oder Annahme hinweisen.

Anatomie

Ein Kästchen besteht aus den folgenden Elementen:

• Box: Dies ist der Container für das Kästchen.
• Prüfen: Dies ist der visuelle Indikator, der angibt, ob das Kästchen angeklickt ist.
• 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 befindet sich in einem unbestimmten Zustand. 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.

Implementierung

Mit dem Checkbox-Komposit 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 erzeugt, wenn das Häkchen entfernt wird:

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

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

Im Folgenden sind einige Punkte aufgeführt, die Sie in diesem Beispiel beachten sollten:

• Statusverwaltung:
  • childCheckedStates: Eine Liste mit booleschen Werten, in der mithilfe von mutableStateOf() der Status eines aktivierten Kästchens jedes untergeordneten Kästchens verfolgt wird.
  • parentState: Ein ToggleableState, dessen Wert aus dem Status der untergeordneten Kästchen abgeleitet ist.
• 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.

Ergebnis

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

Ebenso wird die Komponente angezeigt, wenn alle Optionen aktiviert sind, als wenn der Nutzer auf „Alle auswählen“ tippt:

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

Weitere Informationen

• Material Design-Kästchen