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

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

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

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

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

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

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

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

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

Вы можете сделать это, добавив действие, такое как update local state, update Firestore record, которое срабатывает при изменении выбора на этом виджете.

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

Вот как это делается:

1. Во-первых, убедитесь, что вы создали коллекцию и запросите ее на любом виджете над DropDown или на странице.

2. Чтобы показать опции в выпадающем списке, выберите виджет DropDown > переместите панель свойств >

1. Определить опции > откройте меню Set from Variable > выберите [имя_коллекции] Documents. Установите Available Options > Map List Item, чтобы преобразовать список документов в список значений полей, содержащих имена опций.
2. Установите Свойства документа на поле, содержащее имя опции.
3. Установите следующий параметр Available Options > No Further Changes.
4. Нажмите кнопку Подтвердить.

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

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

Чтобы показать метку опции:

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

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

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

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

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

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

Чтобы отключить выпадающий список:

1. Выберите виджет DropDown, перейдите на панель свойств > Поиск выпадающего списка > включите опцию Disable Dropdown.
2. Нажмите на Unset и выберите источник, который возвращает булево значение (т.е. True или False), например, булеву переменную, Conditions, Code Expression.

Посмотрите, как придать тексту стиль.

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

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

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

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

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

Посмотрите, как добавить границу.

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

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

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

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

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

Узнайте, как показать или скрыть любой виджет с помощью свойства Conditional Visibility.

Узнайте, как добавить отзывчивую видимость к любому виджету.

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