Выпадающий список

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

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

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

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

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

Давайте посмотрим, как добавить виджет DropDown и создать пример, показывающий выбранное значение на виджете Text. Вот как это выглядит:

1. Добавьте DropDown виджет, перейдите в Панель свойств > Определить опции > нажмите Добавить опции, чтобы добавить элементы.
2. Чтобы отобразить значение по умолчанию, перейдите в раздел Начальная конфигурация и введите значение. Убедитесь, что оно соответствует одному из опций, добавленных на предыдущем шаге.
3. Выбранное значение из выпадающего списка можно получить через Состояние виджета > DropDown. Чтобы отобразить его на виджете Text, добавьте Text виджет, перейдите в панель свойств, нажмите Установить из переменной и выберите Состояние виджета > DropDown (то есть название вашего выпадающего списка).

Установка начального значения

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

Чтобы установить начальное значение:

1. Выберите виджет DropDown > перейдите к Панели свойств > Начальная конфигурация.
2. В разделе Начальное значение опции введите имя опции, которую вы хотите установить по умолчанию.
3. Чтобы установить это значение динамически, откройте меню Установить из переменной и выберите переменную.
   1. Например, чтобы установить это значение из Firebase, убедитесь, что у вас есть доступ к документу Firebase, который содержит поле, которое вы хотите установить.
   2. Откройте меню Установить из переменной > выберите [collection_name] Document > выберите поле.
4. Если вы не установите начальное значение, будет отображено Текст подсказки.

Сохранение значения выпадающего списка при изменении выбора

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

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

Настройка

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

Отображение метки опции

Виджет выпадающего списка позволяет показать метку вместо фактического значения опции. Добавив метку опции, вы можете использовать простое/краткое название или аббревиатуру (которая легче сравнивается и обрабатывается на сервере) вместо сложного названия (например, Фолклендские острова (Мальвинские)).

Например, в выпадающем списке Страны вы можете иметь различные значения опций для хранения на сервере, а метки опций для отображения в списке выпадающих списков. Пример:

Значения опций	Метки опций
US	Соединенные Штаты
IN	Индия
FK	Фолклендские острова (Мальвинские)

Для отображения метки опции:

1. Выберите виджет DropDown, перейдите в панель свойств и включите переключатель Добавить метки опций.
2. Введите значение в Определение значений опций и Определение меток опций. Нажмите Добавить опцию (под Определение значений опций), чтобы добавить больше значений и меток.
3. Вы также должны установить тип данных для значений. Например, если значения, которые вы собираетесь сохранить, представлены числами, такими как 1,2,3, установите его на Целое число.

Поиск по выпадающему списку

Виджет DropDown - хороший выбор, если у вас небольшое количество опций, порядка 10-20; однако, если у вас больше опций, рассмотрите вариант использования выпадающего списка с поиском.

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

Чтобы сделать выпадающий список с возможностью поиска:

1. Выберите виджет DropDown, перейдите в Панель свойств > Поиск по выпадающему списку > включите Включить поиск.
2. Также можно настроить свойство Текст подсказки для поиска.

Отключение выпадающего списка

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

Для отключения выпадающего списка:

1. Выберите виджет DropDown, перейдите в Панель свойств > Поиск по выпадающему списку > включите опцию Отключить выпадающий список.
2. Нажмите Сброс и выберите источник, который возвращает логическое значение (True или False), такое как булева переменная, Условия, Выражение кода.

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

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

Для разрешения множественного выбора выберите виджет Dropdown, перейдите в панель свойств, найдите свойство Разрешить множественный выбор и включите его.

к сведению

Для очистки выбора вы можете использовать действие Сбросить поля формы и выбрать опцию Сбросить поля выпадающего списка. Затем просто выберите имя виджета выпадающего списка, который вы хотите сбросить.

Изменение размера выпадающего списка

Чтобы изменить высоту и ширину выпадающего списка, выберите виджет DropDown, перейдите к Панель свойств > Свойства DropDown > введите значение Ширина и Высота.

Установка максимальной высоты

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

Добавление отступа

Отступ добавляет пространство между текстом в DropDown и его границей. Чтобы изменить отступ, выберите виджет DropDown, перейдите к Панель свойств > Свойства DropDown > найдите свойство Margin и измените значения.

Изменение цвета фона

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

Изменение уровня высоты меню

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

Чтобы изменить высоту меню (глубину или ось Z), перейдите к Панель свойств > введите значение Elevation меню.

к сведению

Чем больше значение, тем больше тень.

Добавление границы

См. как добавить границу.

Показать/скрыть подчеркивание

Чтобы показать или скрыть подчеркивание выпадающего списка, перейдите к Панель свойств > Стиль DropDown > используйте переключатель Hides Underline.

Исправление позиции

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

Триггер действия при изменении

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