Выключатель

Компонент 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. Переключатель с пользовательскими цветами.

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

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