Dropdown

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

Виджет уместен везде, где выбор идёт из фиксированного набора: страна, язык, цвет.

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

Соберём пример, где выбранное значение выводится в виджете Text:

1. Добавьте виджет DropDown, откройте Properties Panel > Define Options и нажмите Add Options, чтобы добавить варианты.
2. Значение по умолчанию задаётся в разделе Initial Configuration — оно должно совпадать с одним из вариантов.
3. Выбранное значение доступно в Widget State > DropDown. Чтобы показать его, добавьте виджет Text, нажмите Set from Variable и выберите Widget State > DropDown (имя вашего списка).

Начальное значение

Предвыбранный вариант экономит пользователю действие — особенно когда один из вариантов встречается чаще прочих.

1. Выделите DropDown и откройте Properties Panel > Initial Configuration.
2. В Initial Option Value введите имя варианта.
3. Чтобы взять значение из данных, откройте меню Set from Variable и выберите источник.
   1. Например, для значения из Firebase понадобится доступ к документу с нужным полем.
   2. Откройте Set from Variable > [имя коллекции] Document и выберите поле.
4. Если начальное значение не задано, покажется Hint Text.

Сохранение при смене выбора

Значение можно сохранять сразу, не дожидаясь отправки формы: пользователь не потеряет выбор, если отвлечётся или закроет экран.

Добавьте действие — обновление App State или запись в Firestore — на триггер смены выбора.

Настройка

Внешний вид и поведение настраиваются в панели свойств.

Подписи к вариантам

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

Например, для списка стран:

Как это включить:

1. Выделите DropDown и включите переключатель Add Option Labels.
2. Заполните Define Option Values и Define Options Labels; кнопка Add Option добавляет новые пары.
3. Задайте Data Type для значений: если храните числа 1, 2, 3 — выберите Integer.

Поиск по списку

Обычный список хорош, пока вариантов немного — до полутора-двух десятков. Дальше пользователю проще искать, чем листать.

В списке с поиском появляется строка ввода: по мере набора остаются только подходящие варианты.

Как включить:

1. Выделите DropDown, откройте Properties Panel > DropDown Search и включите Is Searchable.
2. При желании поправьте текст подсказки в Search Hint Text.

Отключение списка

Список стоит блокировать, пока выбор невозможен: например, город нельзя выбрать, пока не выбрана страна.

Как отключить:

1. Выделите DropDown, откройте Properties Panel > DropDown Search и включите Disable Dropdown.
2. Нажмите Unset и укажите источник логического значения: переменную, условие или встроенное выражение.

Множественный выбор

Иногда нужно выбрать несколько вариантов сразу — скажем, отфильтровать футболки и синего, и красного цвета.

Выделите Dropdown и включите свойство Allow Multi Select.

Размеры

Ширина и высота задаются в Properties Panel > DropDown Properties свойствами Width и Height.

Максимальная высота

Высоту раскрытого списка ограничивает свойство Max Height.

Внутренние отступы

Свойство Margin в разделе DropDown Properties задаёт расстояние между текстом и рамкой списка.

Цвет фона

Фон задаётся свойством Fill Color в разделе DropDown Style.

Тень меню

Свойство Menu Elevation добавляет тень: раскрытый список выглядит приподнятым над содержимым страницы.

Рамка

Как добавить рамку.

Подчёркивание

Линия под списком включается и выключается переключателем Hides Underline в разделе DropDown Style.

Положение списка

По умолчанию варианты раскрываются поверх кнопки списка. Чтобы они появлялись под ней, включите Fix Position в разделе DropDown Style.