Выключатель

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

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