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

Базовая реализация
Полное определение API см. в справочнике Switch
. Ниже приведены некоторые ключевые параметры, которые вам могут понадобиться:
-
checked
: Исходное состояние переключателя. -
onCheckedChange
: обратный вызов, который вызывается при изменении состояния переключателя. -
enabled
: включен или отключен переключатель. -
colors
: цвета, используемые для переключателя.
Следующий пример представляет собой минимальную реализацию составного Switch
.
@Composable fun SwitchMinimalExample() { var checked by remember { mutableStateOf(true) } Switch( checked = checked, onCheckedChange = { checked = it } ) }
Эта реализация выглядит следующим образом, если флажок снят:

Вот такой вид при проверке:

Расширенная реализация
Основные параметры, которые вы, возможно, захотите использовать при реализации более продвинутого переключателя, следующие:
-
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 } ) }
В этой реализации внешний вид непроверенного элемента такой же, как в примере в предыдущем разделе. Однако, если этот флажок установлен, эта реализация выглядит следующим образом:

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