Общие свойства виджетов

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

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

Использование клавиатуры для увеличения/уменьшения значения свойства

Вы можете настраивать значение свойства, используя клавиши со стрелками вверх и вниз на клавиатуре. Совет: используйте клавишу Shift в сочетании с клавишами со стрелками, которая увеличивает или уменьшает значение на 10 единиц за раз.

Видимость

Условная

Условная видимость позволяет управлять отображением элементов пользовательского интерфейса (т.е. виджетов) на основе определенных условий или критериев. Она позволяет создавать динамические и персонализированные пользовательские взаимодействия, показывая или скрывая конкретное содержимое или функции.

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

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

Вот как выглядит окончательный результат:

Слева: пользователь не вошел в систему | Справа: пользователь вошел в систему

Вот шаги:

1. Выберите виджет из дерева виджетов или области холста.

2. Перейдите в панель свойств > включите Условное.

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

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

Адаптивность

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

Ниже приведены общие свойства; вы можете использовать ссылки для быстрого доступа к подробной информации о каждом свойстве.

Меню навигации на веб-сайте и мобильном приложении

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

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

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

Адаптивная видимость для мобильных устройств

Адаптивная видимость для веб-сайтов

Настроить показатель адаптивности

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

Для настройки показателей адаптивности откройте Настройки темы (из меню навигации) > Система дизайна > Границы и измените значения.

Например, если вы задаете пользовательский промежуток на 575 пикселей, разместив его между диапазоном "Мобильное устройство" и "Планшет". В этом случае, когда ваше приложение доступно на экране больше 575 пикселей, макет будет настроен в соответствии с конфигурацией планшета.

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

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

Непрозрачность

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

Вы можете управлять прозрачностью из Панели свойств > Видимость > Прозрачность. Он принимает значение от 0 до 1, например, 0 означает полную прозрачность, один - непрозрачность, а 0,5 - полупрозрачность.

Отступы и выравнивание

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

Отступы - это пустое пространство вокруг внешней стороны виджета.

Чтобы добавить отступ:

1. Выберите виджет из дерева виджетов или из области холста.
2. Перейдите к Панели свойств и перейдите в раздел Отступы и выравнивание.
3. Введите значения для Левого (L), Верхнего (T), Правого (R), Нижнего (B).
4. Чтобы применить одинаковый отступ со всех сторон, переключитесь на опцию Равномерный отступ. Затем вы можете отрегулировать отступ, перемещая ползунок или вводя желаемое значение напрямую.
5. Используйте кнопку с иконкой обновления, чтобы сбросить все значения.

Если вы предпочитаете посмотреть видеоурок, вот руководство для вас:

Изменить выравнивание

Это свойство помогает вам позиционировать виджет двумя способами.

Горизонтальное выравнивание определяет, где виджет будет размещен горизонтально внутри своего родительского элемента. Значение -1 поместит виджет слева, а значение 1 - справа.

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

Чтобы изменить выравнивание:

1. Выберите виджет и перейдите к Панели свойств > Отступы и выравнивание.
2. Используйте поле выравнивания для выравнивания виджета в фиксированной позиции или введите значение во входное поле Горизонтальное и Вертикальное.

Если вы предпочитаете посмотреть видеоурок, вот руководство для вас:

Тестирование

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

Изменение размера

Для изменения размера перейдите к свойствам Ширина и Высота, а затем у вас есть три варианта для установки размера:

• Для определенного размера выберите PX и введите желаемый размер.
• Для размера на основе экрана выберите % и введите процент.
• Чтобы виджет заполнил всю ширину или высоту экрана, щелкните на символ бесконечности (∞).

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

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

1. Перейдите к свойству виджета, которое позволяет устанавливать цвет.
2. Нажмите на выбранный цвет, чтобы выбрать новый цвет или введите его Hex-код.
3. По умолчанию отображаются цвета темы. Просто нажмите на нужный цвет, чтобы применить его.
4. Для пользовательского цвета переключитесь на вкладку Custom Color, выберите желаемый цвет и нажмите Use Color.
5. Вы также можете установить цвет из переменной.

Установка цвета из переменной

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

Чтобы установить цвет из переменной:

1. Перейдите к свойству виджета, которое позволяет установить цвет.
2. В меню Set from Variable выберите источник вашего цвета. Пример ниже показывает установку цвета из переменной состояния приложения.

Вы также можете установить цвет на основе условного значения.

Копирование переменной

Если у вас есть сложное значение переменной (например, с использованием условной логики) и вы хотите использовать ту же логику в другом значении переменной, вы можете скопировать переменную.

Чтобы скопировать переменную:

1. Откройте меню Set from Variable и выберите Variable Options (значок трех точек).
2. Выберите Copy Variable.
3. Перейдите к месту, где вы хотите вставить переменную, и откройте меню Set from Variable.
4. Нажмите на значок Paste Variable.
5. Нажмите Confirm.

Одновременное редактирование нескольких виджетов

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

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

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

Добавление изображения из Unsplash

Вы можете добавлять изображения напрямую из Unsplash прямо в панели свойств. Для этого просто нажмите на значок поиска, выберите изображение и его размер (например, Small, Regular, Full).

Отображаемое значение в UI Builder

Для виджетов Text и RichText, когда их содержимое приходит из переменной, вы можете установить значение-заполнитель, которое будет отображаться только в конструкторе приложения. Это значение отображается только для визуализации в интерфейсе и заменяется на реальное значение переменной при запуске приложения.

Это полезно для оценки пробелов и выравнивания без необходимости удаления привязок переменных.

Запуск действия при изменении выбора

Здесь вы узнаете, как запустить действие при изменении выбора для любого виджета формы, такого как Dropdown, RadioButton, ChoiceChips, Slider и RatingBar.

к сведению

Для упрощения в примере используется виджет Dropdown. Тем не менее, те же инструкции применимы и к другим виджетам формы.

Чтобы это сделать:

1. Выберите виджет.
2. Выберите Actions в панели свойств и нажмите + Add Action.
3. Вы увидите, что Type of Action (или обратный вызов) уже установлен на On Selected. Это значит, что добавленные действия будут выполняться при изменении выбора.
4. Теперь вы можете добавить любое действие здесь.

Пример ниже показывает сообщение snackbar при изменении выбора в Dropdown.

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

Чтобы добавить границу к любому виджету:

1. Найдите свойство Border Color и измените цвет.
2. Чтобы создать скругленную границу, используйте свойство Border Radius.
3. Введите значения для TL (верхний левый), TR (верхний правый), BL (нижний левый) и BR (нижний правый).
4. Чтобы применить одинаковый радиус на всех сторонах, переключитесь на опцию Uniform Radius. Затем вы можете настроить радиус, используя ползунок или введя нужное значение напрямую.
5. Используйте значок обновления, чтобы сбросить все значения.
6. Чтобы увеличить толщину границы, используйте свойство Border Width.