Pole wyboru

Pola wyboru umożliwiają użytkownikom wybranie co najmniej jednego elementu z listy. Możesz zaznaczyć pole wyboru, aby pozwolić użytkownikowi na:

• włączać i wyłączać elementy,
• Wybierz jedną z wielu opcji z listy.
• Wyraź zgodę lub akceptację.

Anatomia

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

• Pole: kontener na pole wyboru.
• Zaznacz: to wizualny wskaźnik, który pokazuje, czy pole wyboru jest zaznaczone.
• Etykieta: tekst opisujący pole wyboru.

Stany

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

• Niezaznaczone: pole wyboru nie jest zaznaczone. Pole jest puste.
• Nieokreślone: pole wyboru jest nieokreślone. Pole zawiera myślnik.
• Wybrane: pole wyboru jest zaznaczone. Pole zawiera znacznik wyboru.

Poniższa ilustracja 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 wskazująca, czy pole wyboru jest zaznaczone czy odznaczone.
• onCheckedChange(): funkcja wywoływana przez aplikację po kliknięciu pola wyboru przez użytkownika.

Ten fragment kodu pokazuje, jak użyć 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 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

Ten przykład pozwala wygenerować ten komponent, gdy nie jest zaznaczone:

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 szereg pól wyboru podrzędnych. Gdy użytkownik kliknie pole wyboru rodzica, aplikacja zaznaczy wszystkie pola wyboru elementów 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 punktów, 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: ToggleableState, którego wartość pochodzi ze stanów elementów podrzędnych.
• Komponenty interfejsu:
  • TriStateCheckbox: jest konieczne w przypadku nadrzędnego pola wyboru, ponieważ zawiera parametr state, który pozwala ustawić dla niego wartość nieokreśloną.
  • Checkbox: używane 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 wszystko”, „Opcja X”, „Wybrano wszystkie opcje”).
• Funkcja logiczna:
  • Pole onClick nadrzędnego pola wyboru zmienia wszystkie podrzędne pola wyboru na przeciwne do bieżącego stanu nadrzędnego.
  • Pole onCheckedChange każdego podrzędnego pola wyboru aktualizuje odpowiadający mu stan na liście childCheckedStates.
  • Gdy zaznaczone są wszystkie podrzędne pola wyboru, kod wyświetla „All options selected”.

Wynik

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

Komponent wygląda też tak, gdy zaznaczone są wszystkie opcje, na przykład gdy użytkownik kliknie Zaznacz wszystkie:

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

Dodatkowe materiały

• Pola wyboru Material Design