Поле для флажка

Флажки позволяют пользователям выбрать один или несколько элементов из списка. Флажок можно использовать, чтобы пользователь мог:

• Включите или отключите нужный параметр.
• Выбрать несколько вариантов из списка.
• Выразить согласие или одобрение.

Примечание. Если пользователь может выбрать несколько вариантов в списке, используйте флажки вместо переключателей или радиокнопок.

Анатомия

Флажок состоит из следующих элементов:

• Флажок. Это контейнер для флажка.
• Флажок. Визуальный индикатор, который показывает, установлен ли флажок.
• Ярлык. Текст, описывающий флажок.

Штаты

Флажок может находиться в одном из трех состояний:

• Не выбрано. Флажок не установлен. Коробка пуста.
• Indeterminate (Неопределенный). Флажок находится в неопределенном состоянии. В поле появится тире.
• Выбрано. Флажок установлен. В поле установлен флажок.

На изображении ниже показаны три состояния флажка.

Рисунок 1. Три состояния флажка. "Не выбрано", "Не определено" и "Выбрано".

Реализация

Чтобы создать флажок в приложении, используйте composable-функцию Checkbox. Вот несколько ключевых параметров, о которых следует помнить:

• checked – логическое значение, которое определяет, установлен ли флажок.
• onCheckedChange() – функция, которую вызывает приложение, когда пользователь нажимает на флажок.

В следующем фрагменте кода показано, как использовать composable-функцию 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

Описание

Этот код создает флажок, который изначально не установлен. Когда пользователь нажимает на флажок, лямбда-выражение onCheckedChange обновляет состояние checked.

Результат

Если флажок не установлен, то в этом примере будет создан следующий компонент:

Рисунок 2. Снятый флажок

А вот как выглядит тот же флажок, когда он установлен:

Рисунок 3. Установленный флажок

Расширенный пример

Ниже приведен более сложный пример реализации флажков в приложении. В этом фрагменте кода есть родительский флажок и несколько дочерних. Когда пользователь нажимает на родительский флажок, приложение устанавливает все дочерние флажки.

@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

Описание

Обратите внимание на следующие моменты:

• Управление состоянием.
  • childCheckedStates – список логических значений, в котором используется mutableStateOf() для отслеживания состояния каждого дочернего флажка.
  • parentState: ToggleableState, значение которого зависит от состояния дочерних флажков.
• Компоненты интерфейса:
  • TriStateCheckbox – необходим для родительского флажка, так как у него есть параметр state, позволяющий задать неопределенное состояние.
  • Checkbox – используется для каждого дочернего флажка, состояние которого связано с соответствующим элементом в childCheckedStates.
  • Text: показывает ярлыки и сообщения ("Выбрать все", "Вариант X", "Выбраны все варианты").
• Логика
  • onClick родительского флажка обновляет все дочерние флажки, устанавливая для них значение, противоположное текущему состоянию родительского флажка.
  • Каждый дочерний флажок onCheckedChange обновляет соответствующее состояние в списке childCheckedStates.
  • Если все дочерние флажки установлены, код возвращает значение All options selected.

Примечание. Если вам нужен флажок с неопределенным состоянием, используйте TriStateCheckbox. Это связано с тем, что у него есть параметр state типа ToggleableState, а у Checkbox – нет.

Результат

Если все флажки сняты, то в этом примере будет создан следующий компонент:

Рисунок 4. Снятые флажки

А вот как выглядит компонент, когда выбраны все варианты, например когда пользователь нажимает "Выбрать все":

Рисунок 5. Установленные флажки

Если установлен только один флажок, родительский флажок отображается в неопределенном состоянии:

Рисунок 6. Неопределенный флажок

Дополнительные ресурсы

• Флажки Material Design