Выключатель

Компонент 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 : используйте это для настройки цвета дорожки и ползунка.

Пользовательский большой палец

Вы можете передать любой компонуемый объект параметру 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

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

Пользовательские цвета

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

@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

Эта реализация выглядит следующим образом:

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

• Документация по материальному пользовательскому интерфейсу