Выбор в виде чипсов

Виджет ChoiceChips используется для выбора одной фишки из группы фишек. Каждая фишка представляет собой иконку и текст.

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

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

• Просто перетащите виджет ChoiceChips с вкладки Базовые элементы (в панели виджетов) или добавьте его непосредственно из дерева виджетов.
• Виджет ChoiceChips по умолчанию добавляет один вариант с названием Option 1.

Чтобы изменить название и значок опции:

• Выберите ChoiceChips в дереве виджетов или в области холста.
• Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела «Определить опции«.
• Найдите свойство Option 1 и измените его название на Flight.
• Нажмите на кнопку с названием Train Outlined, затем найдите и выберите иконку с названием рейса.

Чтобы добавить или удалить опцию из ChoiceChips:

• Выберите ChoiceChips в дереве виджетов или в области холста.
• Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела Определить опции.
• Нажмите на текст Добавить опцию.
• Введите имя в Option 2 Text, чтобы отобразить имя опции.
• Установите значок, нажав на кнопку Нет, затем найдите и выберите значок.
• Чтобы удалить опцию, просто нажмите на значок отмены (), отображаемый в свойстве Имя опции.

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

Панель свойств можно использовать для настройки внешнего вида и поведения вашего виджета.

Здесь приведены инструкции по добавлению вставки.

Здесь приведены инструкции по настройке выравнивания.

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

Чтобы изменить выбор по умолчанию:

• Выберите ChoiceChips в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до свойства Initial Option.
• Введите название опции в свойство Initial Option. Например, если ввести значение Train, то будет выбран второй вариант на следующем рисунке.

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

Чтобы добавить промежуток между фишками:

• Выберите ChoiceChips в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до свойства «Расстояние между фишками«.
• Измените значение в свойстве Chip Spacing, чтобы настроить распределение пространства между фишками.

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

Чтобы изменить цвет фона для выбранной фишки, выберите ChoiceChips > перейдите на панель свойств > раздел Стиль выбранной фишки и измените свойство Цвет.

Чтобы настроить значок, выберите ChoiceChips > перейдите в раздел Панель свойств > Стиль выбранной фишки > измените Цвет и Размер значка.

Чтобы изменить высоту (глубину или ось Z) Фишек выбора

• Выберите ChoiceChips в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела «Стиль выбранных фишек«.
• Найдите свойство Elevation и введите значение, чтобы увидеть эффект падающей тени под выбранной фишкой. Большее значение задает больший размер тени.

Label Padding добавляет пространство вокруг текста фишки.

Чтобы добавить надпись Label Padding в фишку:

• Выберите ChoiceChips в дереве виджетов или в области холста.
• Перейдите в Редактор свойств и прокрутите вниз до раздела Выбранный стиль фишки.
• Найдите свойство Label Padding и введите значения для полей ввода L(слева), T(сверху), R(справа) и B(снизу).

Чтобы изменить стиль текста для выбранной фишки, выберите ChoiceChips > перейдите на панель свойств > раздел Стиль выбранной фишки > измените Стиль выбранного текста.

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

Чтобы изменить цвет фона для невыбранной фишки:

• Выберите ChoiceChips в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Стиль невыбранной фишки.
• Найдите свойство Color, нажмите на поле рядом с White, выберите цвет, а затем нажмите Use Selected Color или нажмите на White и введите Hex-код напрямую. Вы также можете выбрать цвет, нажав на кнопку Палитра и просто.

Чтобы изменить размер значка для невыбранной фишки:

• Выберите ChoiceChips в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Стиль невыбранной фишки.
• Найдите свойство Icon Color, нажмите на поле рядом с White, выберите цвет, а затем нажмите Use Selected Color или нажмите на White и введите шестнадцатеричный код напрямую. Вы также можете выбрать цвет, нажав на кнопку Палитра и просто.
• Введите значение в свойство Icon Size (Размер значка).

Чтобы изменить высоту (глубину или ось Z) Фишек выбора

• Выберите ChoiceChips в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела «Стиль невыбранных фишек«.
• Найдите свойство Elevation и введите значение, чтобы увидеть эффект тени под невыбранной фишкой. Большее значение задает больший размер тени.

Label Padding добавляет пространство вокруг текста фишки.

Чтобы добавить надпись Label Padding в фишку:

• Выберите ChoiceChips в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Стиль невыбранной фишки.
• Найдите свойство Label Padding и введите значения для полей ввода L(слева), T(вверху), R(справа) и B(внизу).

Чтобы изменить стиль текста для невыбранной фишки:

• Выберите ChoiceChips в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Стиль невыбранного текста (под разделом Стиль невыбранной фишки).
• Нажмите на кнопку под надписью Font Family (Семейство шрифтов). Выберите шрифт из списка. Если в списке нет нужного шрифта, его можно поискать.
• Чтобы изменить цвет, найдите свойство Цвет текста, нажмите на поле рядом с уже выбранным цветом, выберите цвет, а затем нажмите Использовать невыбранный цвет или нажмите на уже выбранный цвет и введите шестнадцатеричный код напрямую. Вы также можете выбрать цвет, нажав на кнопку Палитра и просто.

После запуска приложения настроенный выбранный чип выглядит следующим образом:

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

Посмотрите, как вызвать действие при изменении выбора на этом виджете.

Пожалуйста, найдите инструкции по отображению/скрытию виджета здесь