Перейти к основному содержимому

ChoiceChips

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

Вы можете использовать этот виджет для реализации функции фильтрации в приложении электронной коммерции, чтобы пользователи могли выбирать разные атрибуты продукта, такие как размер, цвет или диапазон цен.

Состояние виджета

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

Добавление виджета ChoiceChips​

Чтобы добавить виджет ChoiceChips в приложение:

  1. Добавьте виджет ChoiceChips из вкладки Элементы форм.
  2. По умолчанию этот виджет добавляет один вариант с именем Option 1. Чтобы изменить имя, перейдите в панель свойств и прокрутите вниз до раздела Define Options. Найдите свойство Option 1 и измените name и icon.
  3. Чтобы добавить больше вариантов, нажмите на текст Add Option и задайте имя и иконку для новых вариантов.
  4. Чтобы установить любой чип выбранным по умолчанию, найдите свойство Initial Option и введите имя чипа.
    1. Чтобы установить это значение динамически, откройте меню Set from Variable и задайте переменную.
    2. Когда multiselect включен, вы также можете задать список вариантов для предварительного выбора.

Запуск действия при изменении​

Узнайте, как запустить действие при изменении выбора для этого виджета.

Выбор или очистка всех вариантов [Действие]​

Пользователям может потребоваться быстро отменить выбор всех чипов или выбрать все доступные чипы ChoiceChips сразу. Для этого добавьте действие Clear All/Select All.

к сведению

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

Настройка​

Вы можете настроить внешний вид и поведение этого виджета с помощью различных свойств, доступных в панели свойств.

Разрешить множественный выбор​

Возможно, вы захотите разрешить пользователям выбирать несколько вариантов для фильтрации результатов.

Чтобы разрешить множественный выбор, выберите виджет ChoiceChips, перейдите в панель свойств, найдите свойство Allow Multiselect и включите его.

Отключение ChoiceChips​

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

Для этого перейдите в Панель свойств > включите Disable > нажмите Unset и задайте Условия. Это может быть Единичное условие или Комбинированные условия в зависимости от ваших требований. Примечание: Виджет ChoiceChips будет отключен только когда условие(я) истинно(ы).

Добавление пространства между чипами​

Чтобы добавить пространство между чипами, используйте свойства Chip Spacing и Row Spacing.

  • Chip Spacing: Добавляет горизонтальные промежутки между отдельными чипами.
  • Row Spacing: Добавляет вертикальные промежутки между чипами в строке.

Выравнивание чипов​

Когда у вас есть чипы в нескольких строках, вы можете выровнять их с помощью свойства Alignment. Это аналогично установке выравнивания по главной оси для виджета Row.

Настройка стиля выбранного и невыбранного чипа​

Различные свойства в разделах Selected Chip Style и Unselected Chip Style позволяют настроить чипы в соответствии с вашим дизайном. Вот как это сделать:

  1. Чтобы изменить цвет фона, используйте свойство Color.
  2. Чтобы изменить цвет и размер иконки, используйте свойства Icon Color и Icon Size.
  3. Чтобы добавить тень или создать ощущение глубины для чипа, используйте свойство Elevation.
  4. Чтобы настроить границу, используйте свойства Border Color, Border Width (толщина) и Border Radius (скругленные углы).
  5. Чтобы создать пространство вокруг метки, используйте свойство Label Padding.
  6. Чтобы изменить стиль текста метки, используйте свойство Selected Text Style.

  1. Аналогично вы можете настроить свойства в разделе Unselected Chip Style.

Настройка стиля невыбранного чипа