ChoiceChips
ChoiceChips — набор «чипов», из которых пользователь выбирает вариант. У каждого чипа есть подпись и иконка.
Классическое применение — фильтры в магазине: размер, цвет, диапазон цены.
Прежде чем браться за виджеты форм, посмотрите руководство по состоянию виджетов — оно объясняет, как хранится и читается их значение.
Добавление виджета
- Добавьте виджет ChoiceChips из вкладки Form Elements.
- По умолчанию у него один вариант — Option 1. Чтобы его переименовать, откройте панель свойств, найдите раздел Define Options, а в нём — свойство Option 1, и задайте name и icon.
- Новые варианты добавляются ссылкой Add Option; для каждого задаются подпись и иконка.
- Выбранный по умолчанию чип задаётся свойством Initial Option — введите его имя.
- Значение можно взять из переменной через меню Set from Variable.
- При включённом множественном выборе задаётся список заранее выбранных вариантов.
Действие при смене выбора
Как выполнить действие при смене выбора.
Выбрать или снять всё
Действие Clear All/Select All снимает выделение со всех чипов или выделяет их разом.
Сначала включите множественный выбор.
Настройка
Внешний вид и поведение виджета настраиваются в панели свойств.
Множественный выбор
Чтобы пользователь мог выбрать несколько вариантов сразу — например, несколько фильтров, — выделите виджет ChoiceChips и включите свойство Allow Multiselect.
Отключение выбора
Иногда варианты нужно показать, но запретить их менять.
Откройте панель свойств, включите Disable, нажмите Unset и задайте условие — одиночное или составное. Виджет отключится, когда условие истинно.
Отступы между чипами
- Chip Spacing — расстояние между чипами по горизонтали.
- Row Spacing — расстояние между рядами чипов.
Выравнивание
Если чипы занимают несколько рядов, их положение задаётся свойством Alignment — так же, как выравнивание по главной оси у виджета Row.
Оформление выбранных и обычных чипов
Разделы Selected Chip Style и Unselected Chip Style отвечают за внешний вид:
- Color — цвет фона.
- Icon Color и Icon Size — цвет и размер иконки.
- Elevation — тень, добавляющая объём.
- Border Color, Border Width и Border Radius — цвет, толщина и скругление рамки.
- Label Padding — отступы вокруг подписи.
- Selected Text Style — оформление текста.
- Точно так же настраиваются свойства в разделе Unselected Chip Style.
