Компонент 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,
)
)
}
Эта реализация выглядит следующим образом:
