Выпадающий список
Виджет DropDown позволяет пользователям выбирать из списка вариантов. Для его работы требуется набор элементов для отображения и начальное значение, указывающее текущий выбор. Когда пользователь выбирает элемент из списка, значение обновляется, чтобы отразить выбранный элемент.
Этот виджет можно использовать в любой ситуации, когда требуется выбор из набора вариантов, например, выбор страны, языка или цвета.
Перед изучением виджетов форм ознакомьтесь с руководством по состояниям виджетов, чтобы эффективно управлять состоянием и поведением элементов формы.
Добавление виджета DropDown
Давайте разберем, как добавить виджет DropDown и создать пример, который отображает выбранное значение на виджете Text. Вот как это выглядит:
- Добавьте виджет DropDown, перейдите в Properties Panel > Define Options > и нажмите Add Options, чтобы добавить элементы.
- Чтобы отобразить значение по умолчанию, перейдите в раздел Initial Configuration и введите значение. Убедитесь, что оно соответствует одному из добавленных ранее вариантов.
- Выбранное значение выпадающего списка можно получить через Widget State > DropDown. Чтобы отобразить его на виджете Text, добавьте виджет Text, перейдите в панель свойств, нажмите Set from Variable и выберите Widget State > DropDown (т. е. имя вашего выпадающего списка).
Установка начального значения
Установка значения по умолчанию или начального значения для DropDown — распространенное требование для многих приложений. Это улучшает пользовательский опыт, предварительно выбирая наиболее вероятный вариант.
Чтобы установить начальное значение:
- Выберите виджет DropDown > перейдите в Properties Panel > Initial Configuration.
- В поле Initial Option Value введите имя варианта, который хотите установить по умолчанию.
- Чтобы установить это значение динамически, откройте меню Set from Variable и выберите переменную.
- Например, чтобы установить значение из Firebase, убедитесь, что у вас есть доступ к документу Firebase, содержащему поле, которое вы хотите установить.
- Откройте меню Set from Variable > выберите [collection_name] Document > выберите поле.
- Если начальное значение не установлено, будет отображаться Hint Text.
Сохранение значения DropDown при изменении выбора
Возможно, вы захотите сохранять значение выпадающего списка сразу после изменения выбора. Этот подход полезен, когда нужно гарантировать немедленное сохранение выбора пользователя без ожидания отправки формы. Таким образом, вы улучшите пользовательский опыт и снизите риск потери данных в случае прерывания.
Для этого добавьте действие, такое как update app state, update Firestore record, которое срабатывает при изменении выбора в этом виджете.
Настройка
Вы можете настроить внешний вид и поведение этого виджета с помощью различных свойств, доступных в панели свойств.
Отображение метки опции
Виджет выпадающего списка позволяет отображать метку вместо фактического значения опции. Добавляя метку опции, вы можете использовать простое/короткое имя или аббревиатуру (которое легко сравнивать и обрабатывать на сервере), вместо сложного имени (например, Falkland Islands (the) [Malvinas]).
Например, в выпадающем списке стран можно иметь разные Option Values для хранения на сервере и Option Labels для отображения в списке. Как показано ниже:
| Значения опций | Метки опций |
|---|---|
| US | United States |
| IN | India |
| FK | Falkland Islands (the) [Malvinas] |
Чтобы отобразить метку опции:
- Выберите виджет DropDown, перейдите в панель свойств и включите переключатель Add Option Labels.
- Введите значение в поля Define Option Values и Define Options Labels. Нажмите Add Option (под Define Option Values), чтобы добавить больше значений и меток.
- Также необходимо установить Data Type для значений. Например, если значения, которые вы собираетесь хранить, — это числа вроде 1, 2, 3, установите Integer.
Поисковый выпадающий список
Виджет DropDown — хороший выбо р, когда у вас небольшое количество вариантов, до 10–20; однако, если вариантов больше, рассмотрите использование поискового выпадающего списка.
Поисковый выпадающий список позволяет пользователям искать и фильтровать варианты, вводя текст в поле поиска. По мере ввода список динамически фильтруется, показывая только подходящие варианты. Это особенно полезно для длинных списков и улучшает пользовательский опыт, сокращая время на поиск и выбор опции.
Чтобы сделать виджет выпадающего списка поисковым:
- Выберите виджет DropDown, перейдите в Properties Panel > DropDown Search > и включите опцию Is Searchable.
- Также можно настроить свойство Search Hint Text.
Отключение выпадающего списка
Возможно, потребуется отключить выпадающий список, когда определенные условия еще не выполнены. Например, когда варианты зависят от других полей, которые еще не заполнены.
Чтобы отключить выпадающий список:
- Выберите виджет DropDown, перейдите в Properties Panel > DropDown Search > и включите опцию Disable Dropdown.
- Нажмите Unset и выберите источник, возвращающий булево значение (True или False), например, булеву переменную, Conditions, Inline Function.
Разрешение множественного выбора
Возможно, вы захотите разрешить пользователям выбирать несколько вариантов из списка. Например, в приложении электронной коммерции пользователи могут фильтровать товары по нескольким атрибутам, таким как футболки как 'blue', так и 'red' цветов.
Чтобы разрешить множественный выбор, выберите виджет Dropdown, перейдите в панель свойств, найдите свойство Allow Multi Select и включите его.
Чтобы сбросить выбор, используйте действие Reset Form Fields и выберите опцию Reset Dropdown Fields. Затем просто укажите имя виджета выпадающего списка, который нужно сбросить.
Изменение размера выпадающего списка
Чтобы изменить высоту и ширину выпадающего списка, выберите виджет DropDown, перейдите в Properties Panel > DropDown Properties > и введите значения Width и Height.
Установка максимальной высоты
При необходимости вы также можете контролировать высоту выпадающего списка с помощью свойства Max Height.
Добавление отступа
Отступ добавляет пространство между текстом DropDown и его границей. Чтобы изменить отступ, выберите виджет DropDown, перейдите в Properties Panel > DropDown Properties > найдите свойство Margin и измените значения.
Изменение цвета фона
Чтобы изменить цвет фона, перейдите в Properties Panel > DropDown Style > set the Fill Color.
Изменение высоты меню
Высота меню добавляет тень к выпадающему списку, создавая ощущение глубины и размещая его над поверхностью.
Чтобы изменить высоту меню (глубину или ось Z), перейдите в Properties Panel > и введите значение Menu Elevation.
Чем выше значение, тем больше размер тени.
Добавление границы
См., как добавить границу.
Показ/скрытие подчеркивания
Чтобы показать или скрыть подчеркивание выпадающего списка, перейдите в Properties Panel > DropDown Style > используйте переключатель Hides Underline.
Фиксация позиции
По умолчанию варианты выпадающего списка отображаются над/выше кнопки выпадающего списка. Чтобы отображать их под/ниже кнопки, перейдите в Properties Panel > DropDown Style > включите переключатель Fix Position.
