Выключатель

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

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

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

Рисунок 1. Компонент переключателя.

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

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

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

Следующий пример представляет собой минимальную реализацию компонуемого объекта Switch .

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

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

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

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

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

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

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

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

• 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

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

Рисунок 4. Переключатель с настраиваемым значком.

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

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

@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

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

Рисунок 5. Переключатель с пользовательскими цветами.

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

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