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

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

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

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

Базовая реализация

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

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

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

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

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

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

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

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

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

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

Свой значок

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

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

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        thumbContent = if (checked) {
            {
                Icon(
                    imageVector = Icons.Filled.Check,
                    contentDescription = null,
                    modifier = Modifier.size(SwitchDefaults.IconSize),
                )
            }
        } else {
            null
        }
    )
}
Switch.kt

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

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

В следующем примере показано, как с помощью параметра 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,
        )
    )
}
Switch.kt

Вот как это будет выглядеть:

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

• Документация по Material UI