Флажок

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

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

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

Анатомия

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

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

Штаты

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

• Не выбрано : Флажок не установлен. Поле пустое.
• Неопределенно : Флажок находится в неопределенном состоянии. В поле стоит тире.
• Выбрано : Флажок установлен. Поле содержит галочку.

На следующем рисунке показаны три состояния флажка.

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

Выполнение

Вы можете использовать Checkbox composable для создания флажка в вашем приложении. Есть всего несколько ключевых параметров, которые следует иметь в виду:

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

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