Как использовать TriState Toggle в Jetpack Compose

Переключение между несколькими состояниями в пользовательском интерфейсе Android

Для обработки двойного состояния в Jetpack Compose (например, переключение между дневным и ночным режимами) мы используем переключатель, например:

val checkedState = remember { mutableStateOf(true) }
Switch( checked = checkedState.value, onCheckedChange = { checkedState.value = it }
)

Но Compose не предоставляет никаких компонентов, которые позволили бы нам обрабатывать несколько состояний.

Например, вместо дневного и ночного режима мы хотим иметь дневное, ночное и вечернее состояния. Или эти состояния могут расти в числе. Одно из решений состоит в том, что мы можем использовать RadioGroup с RadioButtons, но это выглядит некрасиво.

Чтобы преодолеть это, мы можем разработать нашу пользовательскую кнопку состояния переключения, которая будет иметь более двух состояний. Во-первых, давайте посмотрим на код.

Во-первых, мы создаем список состояний, который будет определять, сколько состояний будет у кнопки-переключателя.

Затем мы создаем selectedOption, не забывая пережить изменения конфигурации, которые сохранят текущее значение активного состояния.

Затем лямбда для обновления значения параметра selected.

val onSelectionChange = { text: String ->        
    selectedOption = text    
}

Затем мы создаем представление верхнего уровня в качестве поверхности, чтобы придать нашей кнопке приятный вид. И чтобы он обернул контент, который у него есть в виде children представлений, мы используем:

Modifier.wrapContentSize()

Затем, чтобы имитировать внешний вид красивой кнопки-переключателя, мы используем Row. И придать ему круглую форму для более гладкого вида.

Затем мы перебираем наш список states, чтобы добавить необходимые состояния в строку. В атрибуте clickable мы обновляем значение selectedOption текстом выбранного элемента.

.clickable {
    onSelectionChange(text)                        
}

В атрибуте background мы проверяем, является ли элемент выбранным, и если это правда, то меняем его цвет фона на «пурпурный», в противном случае сохраняем его на «светло-серый».

Это основной элемент имитации кнопки-переключателя. Поскольку выбранный элемент будет другого цвета, чем остальные.

Примечание. Вы можете изменить этот атрибут фона в соответствии с вашими требованиями к дизайну.

.background(  
if (text == selectedOption) {
     Color.Magenta
} else {                                
     Color.LightGray                           
  }                       
)

Вы можете использовать значение selectedItem для достижения результата.

В итоге окончательный результат будет выглядеть так.

Спасибо, это все.