Pole wyboru

Pola wyboru pozwalają użytkownikom wybrać co najmniej 1 element z listy. Pola wyboru możesz użyć, aby umożliwić użytkownikowi:

• włączanie i wyłączanie elementu;
• wybieranie spośród wielu opcji na liście;
• wyrażanie zgody lub akceptacji.

Anatomia

Pole wyboru składa się z tych elementów:

• Pole: kontener pola wyboru.
• Znacznik wyboru: wizualny wskaźnik informujący, czy pole wyboru jest zaznaczone.
• Etykieta: tekst opisujący pole wyboru.

Stany

Pole wyboru może mieć jeden z 3 stanów:

• Odznaczone: pole wyboru nie jest zaznaczone. Pole jest puste.
• Nieokreślone: pole wyboru jest w stanie nieokreślonym. Pole zawiera kreskę.
• Zaznaczone: pole wyboru jest zaznaczone. Pole zawiera znacznik wyboru.

Obraz poniżej przedstawia 3 stany pola wyboru.

Implementacja

Aby utworzyć pole wyboru w aplikacji, możesz użyć funkcji kompozycyjnej Checkbox. Pamiętaj o tych kilku kluczowych parametrach:

• checked: wartość logiczna, która określa, czy pole wyboru jest zaznaczone.
• onCheckedChange(): funkcja, którą aplikacja wywołuje, gdy użytkownik kliknie pole wyboru.

Poniższy fragment kodu pokazuje, jak używać funkcji kompozycyjnej Checkbox:

@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

Wyjaśnienie

Ten kod tworzy pole wyboru, które początkowo jest odznaczone. Gdy użytkownik kliknie pole wyboru, lambda onCheckedChange zaktualizuje stan checked.

Wynik

Ten przykład tworzy ten komponent, gdy pole wyboru jest odznaczone:

Tak wygląda to samo pole wyboru, gdy jest zaznaczone:

Zaawansowany przykład

Poniżej znajdziesz bardziej złożony przykład implementacji pól wyboru w aplikacji. W tym fragmencie znajduje się nadrzędne pole wyboru i seria podrzędnych pól wyboru. Gdy użytkownik kliknie nadrzędne pole wyboru, aplikacja zaznaczy wszystkie podrzędne pola wyboru.

@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

Wyjaśnienie

Oto kilka kwestii, na które warto zwrócić uwagę w tym przykładzie:

• Zarządzanie stanem:
  • childCheckedStates: lista wartości logicznych używających mutableStateOf() do śledzenia stanu zaznaczenia każdego podrzędnego pola wyboru.
  • parentState: ToggleableState, którego wartość pochodzi ze stanów podrzędnych pól wyboru.
• Komponenty interfejsu:
  • TriStateCheckbox: jest niezbędny w przypadku nadrzędnego pola wyboru, ponieważ ma parametr state, który pozwala ustawić go na nieokreślony.
  • Checkbox: używany w przypadku każdego podrzędnego pola wyboru, którego stan jest powiązany z odpowiednim elementem w childCheckedStates.
  • Text: wyświetla etykiety i komunikaty („Zaznacz wszystkie”, „Opcja X”, „Wybrano wszystkie opcje”).
• Logika:
  • onClick nadrzędnego pola wyboru aktualizuje wszystkie podrzędne pola wyboru do stanu przeciwnego do bieżącego stanu nadrzędnego.
  • onCheckedChange każdego podrzędnego pola wyboru aktualizuje jego odpowiedni stan na liście childCheckedStates.
  • Gdy wszystkie podrzędne pola wyboru są zaznaczone, kod wyświetla komunikat „All options selected”.

Wynik

Ten przykład tworzy ten komponent, gdy wszystkie pola wyboru są odznaczone.

Podobnie komponent wygląda, gdy wszystkie opcje są zaznaczone, np. gdy użytkownik kliknie „Zaznacz wszystkie”:

Gdy zaznaczona jest tylko 1 opcja, nadrzędne pole wyboru wyświetla stan nieokreślony:

Dodatkowe materiały

• Pola wyboru Material Design