Pole wyboru

Pola wyboru umożliwiają użytkownikom wybór co najmniej 1 elementu z listy. Możesz użyć pola wyboru, aby umożliwić użytkownikowi wykonanie tych czynności:

• Włącz lub wyłącz element.
• Wybierz jedną z wielu opcji na liście.
• wyrazić zgodę lub akceptację;

Anatomia

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

• Pole: to kontener pola wyboru.
• Znacznik wyboru: jest to wskaźnik wizualny, 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. Pudełko jest puste.
• Indeterminate: pole wyboru jest w stanie nieokreślonym. W polu znajduje się kreska.
• Zaznaczone: pole wyboru jest zaznaczone. W polu znajduje się znacznik wyboru.

Poniższy obraz przedstawia 3 stany pola wyboru.

Implementacja

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

• checked: wartość logiczna, która określa, czy pole wyboru jest zaznaczone czy odznaczone.
• onCheckedChange(): funkcja wywoływana przez aplikację, gdy użytkownik klika 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 nie jest zaznaczone. Gdy użytkownik kliknie pole wyboru, funkcja lambda onCheckedChange aktualizuje stan checked.

Wynik

Jeśli pole nie jest zaznaczone, ten przykład generuje następujący komponent:

A tak wygląda zaznaczone pole wyboru:

Przykład zaawansowany

Poniżej znajdziesz bardziej złożony przykład implementacji pól wyboru w aplikacji. W tym fragmencie kodu występuje 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, która używa 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 wymagany w przypadku nadrzędnego pola wyboru, ponieważ ma parametr state, który umożliwia ustawienie go jako nieokreślonego.
  • 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 wszystko”, „Opcja X”, „Zaznaczono wszystkie opcje”).
• Logika:
  • onClick pola wyboru nadrzędnego aktualizuje wszystkie pola wyboru podrzędne do stanu przeciwnego do bieżącego stanu pola nadrzędnego.
  • Każdy podrzędny element onCheckedChange pola wyboru aktualizuje odpowiedni stan na liście childCheckedStates.
  • Gdy wszystkie podrzędne pola wyboru są zaznaczone, kod wyświetla „All options selected”.

Wynik

Ten przykład generuje następujący komponent, gdy wszystkie pola wyboru są odznaczone.

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

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

Dodatkowe materiały

• Pola wyboru w Material Design