Pole wyboru

Pola wyboru umożliwiają użytkownikom wybranie co najmniej jednego elementu z listy. Za pomocą pola wyboru możesz zezwolić użytkownikowi na:

• Włącz lub wyłącz element.
• Wybierz opcję z listy.
• Wskaż, czy zgadzasz się na to.

Anatomia

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

• Pole: to pole zawiera pole wyboru.
• Zaznacz: to wizualny wskaźnik pokazują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ślony: pole wyboru jest w nieokreślonym stanie. Pole zawiera myślnik.
• Zaznaczone: pole wyboru jest zaznaczone. Pole zawiera znacznik wyboru.

Poniższy obraz przedstawia 3 stany pola wyboru.

Implementacja

Aby utworzyć pole wyboru w aplikacji, możesz użyć funkcji kompozycyjnej Checkbox. Trzeba jednak pamiętać o kilku kluczowych parametrach:

• checked: wartość logiczna określająca, czy pole wyboru jest zaznaczone, czy nie.
• onCheckedChange(): funkcja wywoływana przez aplikację po kliknięciu pola wyboru przez użytkownika.

Ten fragment kodu pokazuje, jak używać komponentu 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 powoduje utworzenie pola wyboru, które początkowo nie jest zaznaczone. Gdy użytkownik kliknie to pole wyboru, funkcja lambda onCheckedChange zaktualizuje stan checked.

Wynik

W tym przykładzie, jeśli nie zaznaczysz pola wyboru, powstanie taki komponent:

To samo pole wyboru wygląda tak:

Przykład zaawansowany

Poniżej znajduje się bardziej skomplikowany przykład wdrażania pól wyboru w aplikacji. We fragmencie kodu znajduje się pole wyboru nadrzędnego i seria pól wyboru podrzędnych. Gdy użytkownik kliknie pole wyboru rodzica, aplikacja zaznaczy wszystkie pola wyboru podrzędnych.

@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 informacji, o których warto pamiętać w tym przykładzie:

• Zarządzanie stanem:
  • childCheckedStates: lista wartości logicznych używających mutableStateOf() do śledzenia stanu zaznaczonego pola każdego podrzędnego pola wyboru.
  • parentState: parametr ToggleableState, którego wartość pochodzi ze stanów podrzędnych pól wyboru.
• Składniki interfejsu:
  • TriStateCheckbox: jest konieczne w przypadku nadrzędnego pola wyboru, ponieważ zawiera parametr state, który pozwala ustawić dla niego wartość nieokreśloną.
  • Checkbox: służy do każdego pola wyboru podrzędnego, którego stan jest powiązany z odpowiednim elementem w childCheckedStates.
  • Text: wyświetla etykiety i wiadomości („Zaznacz wszystkie”, „Opcja X”, „Wszystkie opcje zaznaczone”).
• Logika:
  • Zaznaczenie pola wyboru onClick na poziomie nadrzędnym powoduje zaktualizowanie wszystkich pól podrzędnych do stanu przeciwnego do bieżącego stanu nadrzędnego.
  • Pole onCheckedChange każdego podrzędnego pola wyboru aktualizuje odpowiadający mu stan na liście childCheckedStates.
  • Gdy wszystkie pola wyboru podrzędnych są zaznaczone, kod wyświetla „All options selected”.

Wynik

Ten przykład powoduje wygenerowanie poniższego komponentu, gdy wszystkie pola wyboru nie są zaznaczone.

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

Gdy zaznaczona jest tylko jedna opcja, w nadrzędnym polu wyboru pojawi się stan nieokreślony:

Dodatkowe materiały

• Pola wyboru Material Design