Kästchen

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

• Element ein- oder ausschalten
• Es stehen mehrere Optionen zur Auswahl.
• die auf eine Vereinbarung oder Annahme hinweisen.

Anatomie

Ein Kästchen besteht aus den folgenden Elementen:

• Box: Das 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.

In der folgenden Abbildung sind die drei Status eines Kästchens dargestellt.

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 angeklickt oder deaktiviert ist.
• onCheckedChange(): Die Funktion, die von der App aufgerufen wird, 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

Durch diesen Code wird ein Kontrollkästchen erstellt, das zunächst deaktiviert ist. Wenn der Nutzer auf das Kästchen klickt, aktualisiert das Lambda onCheckedChange den Status checked.

Ergebnis

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

Wenn ein Häkchen gesetzt ist, sieht das Kontrollkästchen dann so aus:

Erweitertes Beispiel

Im folgenden Beispiel sehen 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 Kästchen für übergeordnete Elemente tippt, überprüft die App alle untergeordneten Kästchen.

@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 den Parameter state enthält, mit dem Sie ihn auf „Unbestimmt“ festlegen 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 Meldungen an („Alle auswählen“, „Option X“, „Alle Optionen ausgewählt“).
• Logik:
  • Mit onClick des übergeordneten Kästchens werden alle untergeordneten Kästchen auf das Gegenteil des aktuellen übergeordneten Status aktualisiert.
  • Mit onCheckedChange jedes untergeordneten Kästchens wird der entsprechende Status in der childCheckedStates-Liste aktualisiert.
  • Der Code zeigt „All options selected“ an, 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 ausgewählt ist, wird über das übergeordnete Kästchen der unbestimmte Status angezeigt:

Zusätzliche Ressourcen

• Material Design-Kästchen