Переключение

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

  • Включите или отключите настройку.
  • Включить или отключить функцию.
  • Выберите нужный вариант.

Компонент состоит из двух частей: ползунка и дорожки. Ползунок – это перетаскиваемая часть переключателя, а дорожка – это фон. Пользователь может перетащить ползунок влево или вправо, чтобы изменить состояние переключателя. Они также могут нажать на переключатель, чтобы проверить и очистить его.

Примеры компонента Switch в светлом и тёмном режимах.
Рисунок 1. компонент переключателя.

Базовый вариант

Полное описание API приведено в справочнике по Switch. Ниже приведены некоторые из основных параметров, которые могут вам понадобиться.

  • checked – исходное состояние переключателя.
  • onCheckedChange – обратный вызов, который активируется при изменении состояния переключателя.
  • enabled – включен или отключен переключатель.
  • colors: цвета, используемые для переключателя.

Ниже приведен пример минимальной реализации composable-функции Switch.

@Composable
fun SwitchMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}

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

Простой переключатель, который не установлен.
Рисунок 2. Переключатель не установлен.

Вот как выглядит выбранный вариант:

Базовый переключатель, который включен.
Рисунок 3. Переключатель включен.

Расширенная реализация

Основные параметры, которые могут потребоваться при реализации более сложного переключателя:

  • thumbContent – позволяет настроить внешний вид ползунка, когда он включен.
  • colors – позволяет настроить цвет дорожки и ползунка.

Свой значок

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

@Composable
fun SwitchWithIconExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        thumbContent = if (checked) {
            {
                Icon(
                    painter = rememberVectorPainter(AppIcons.Check),
                    contentDescription = null,
                    modifier = Modifier.size(SwitchDefaults.IconSize),
                )
            }
        } else {
            null
        }
    )
}

В этой реализации внешний вид флажка без пометки такой же, как в примере из предыдущего раздела. Однако при проверке эта реализация выглядит следующим образом:

Переключатель, который использует параметр thumbContent для отображения пользовательского значка при проверке.
Рисунок 4. Переключатель с пользовательским значком.

Собственные цвета

В следующем примере показано, как использовать параметр colors, чтобы изменить цвет ползунка и дорожки переключателя с учетом того, включен ли он.

@Composable
fun SwitchWithCustomColors() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        colors = SwitchDefaults.colors(
            checkedThumbColor = MaterialTheme.colorScheme.primary,
            checkedTrackColor = MaterialTheme.colorScheme.primaryContainer,
            uncheckedThumbColor = MaterialTheme.colorScheme.secondary,
            uncheckedTrackColor = MaterialTheme.colorScheme.secondaryContainer,
        )
    )
}

Вот как это выглядит:

Переключатель, который использует параметр colors для отображения переключателя с пользовательскими цветами как для ползунка, так и для дорожки.
Рисунок 5. Переключатель с пользовательскими цветами.

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