Выключатель

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

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

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

Примеры компонента Switch в светлом и темном режиме.
Рисунок 1. Компонент коммутатора.

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

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

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

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

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

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

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

Базовый переключатель, который не отмечен галочкой.
Рисунок 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
        }
    )
}

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

Переключатель, который использует параметр thumbContent для отображения пользовательского значка, если он установлен.
Рисунок 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,
        )
    )
}

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

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

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