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

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

Видимость

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

Условная

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

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

к сведению

Переключатель Show in UI Builder влияет только на видимость в дизайн-холсте, позволяя быстро просмотреть, как изменится макет при показе или скрытии этого виджета.

Адаптивная

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

Например, вы можете создать два отдельных меню навигации:

• Desktop Menu: Широкое меню, выровненное по левому краю, видимое только на больших экранах — включите значок десктопа и отключите все остальные значки размеров экрана.
• Mobile Menu: Компактное меню в виде выдвижной панели, видимое только на маленьких экранах — включите значок телефона и отключите все остальные значки размеров экрана.

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

Свойство Opacity управляет степенью прозрачности или видимости виджета. Оно принимает значение от 0 до 1, где 0 означает полностью прозрачный, 1 — полностью непрозрачный, а 0.5 — полупрозрачный.

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

При включенной опции Animated Opacity любые изменения значения непрозрачности плавно анимируются на основе указанной длительности и кривой, что повышает визуальную привлекательность и удобство для пользователя.

Отступы

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

Чтобы установить отступы, выберите виджет, перейдите в раздел Padding & Alignment > Padding в Properties Panel и введите значения в пикселях (px), которые представляют логические пиксели.

Вы можете выбрать один из двух вариантов:

• Uniform Padding: Применить одно и то же значение ко всем четырем сторонам.
• Independent Padding: Установить разные значения отступов для верха, низа, левого и правого краев.

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

Выравнивание

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

Чтобы установить выравнивание, выберите виджет и перейдите в раздел Padding & Alignment > Alignment в Properties Panel. Вы увидите сетку 3×3, представляющую все девять позиций:

• Top Left
• Top Center
• Top Right
• Center Left
• Center (Default)
• Center Right
• Bottom Left
• Bottom Center
• Bottom Right

Просто кликните на точку, представляющую желаемую позицию виджета. В качестве альтернативы вы можете ввести конкретное значение (от -1 до 1) для точного горизонтального и вертикального выравнивания.

• X (Horizontal Alignment) управляет позицией виджета вдоль горизонтальной оси внутри родителя. Значение -1 выравнивает его по левому краю, 0 — по центру, а 1 — по правому краю.
• Y (Vertical Alignment) управляет позицией виджета вдоль вертикальной оси. Значение -1 размещает его сверху, 0 — по вертикальному центру, а 1 — снизу.

к сведению

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

Добавление ключа значения для тестирования

Value Key используется для уникальной идентификации виджетов во время автоматизированного тестирования в FlutterFlow. Например, на странице создания учетной записи вы можете использовать описательные ключи, такие как signupFirstNameField, signupEmailField, signupPasswordField и signupSubmitButton. Это помогает инструментам тестирования надежно находить и взаимодействовать с правильными виджетами. Подробности см. в полном руководстве здесь.

Установка ширины и высоты

Чтобы изменить размер виджета, кликните на виджет, который хотите изменить, и перейдите в панель свойств справа. Там вы можете установить размер следующими способами:

• PX (Pixels): Введите фиксированный размер в пикселях для постоянного измерения.
• % (Percentage): Установите размер относительно экрана или родительского контейнера.
• ∞ (Infinity): Сделайте виджет расширяющимся, чтобы заполнить доступную ширину или высоту.

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

Адаптивная ширина и высота

Вы также можете использовать Responsive Value, чтобы применять разные значения ширины или высоты на основе размера экрана. Чтобы настроить это, откройте меню Set from Variable и выберите Responsive Value. Затем назначьте конкретные значения размеров для каждой категории экрана, такой как мобильный (Screen Width < Breakpoint Small), планшет (Screen Width < Breakpoint Medium) и десктоп (Screen Width < Breakpoint Large).

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

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

подсказка

Удерживайте клавишу Shift, нажимая стрелки, чтобы изменять значение на 10 единиц за раз.

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

Чтобы изменить цвет, перейдите к свойству виджета, которое позволяет установить цвет, и кликните на текущий выбранный цвет. Это откроет Color Picker, где у вас есть несколько способов установить желаемый цвет:

• Custom Color: Используйте градиентную область для выбора любого оттенка и тонкой настройки с помощью:
  • Ползунка оттенка (радужная полоса) для регулировки базового цвета.
  • Ползунка прозрачности (шахматная полоса) для управления непрозрачностью (альфа-значением).
• Use RGB or HEX: Вручную введите HEX-код (например, #A489F5) или установите RGB-значения напрямую для точного контроля цвета. Значение Alpha (A) определяет прозрачность (например, 100% = полностью непрозрачный).
• Theme Colors: Ниже селектора вы найдете список предопределенных тематических цветов вашего приложения, таких как Primary, Secondary и Background. Использование тематических цветов обеспечивает последовательность дизайна по всему приложению и упрощает глобальные обновления.
• Set from Variable: Вы также можете динамически назначать цвет на основе логики приложения. Например, изменять цвет фона в зависимости от выбранного элемента или темы.

подсказка

Вы также можете назначить цвет с помощью строковой переменной, содержащей значение цвета в стиле CSS (например, "#FF5733", "rgba(255, 87, 51, 1)" или "red"). Это особенно полезно, когда цвета хранятся в базе данных или возвращаются из API. Убедитесь, что формат строки соответствует допустимому синтаксису цветов CSS, поскольку FlutterFlow использует пакет from_css_color для разбора этих значений.

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

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

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

Чтобы скопировать и вставить переменную, откройте меню Set from Variable, кликните на три точки и выберите Copy Variable. Затем перейдите в целевое место, откройте то же меню, кликните Paste Variable и подтвердите.

Массовое редактирование свойств

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

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

Использование изображений из Unsplash

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

подсказка

Вы также можете выбрать размер изображения (т.е. Small, Regular или Full) перед добавлением, в зависимости от вашего макета.

Значение отображения в UI Builder

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

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

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

Вы можете добавить границу к любому виджету с помощью следующих свойств:

• Border Color: Выберите цвет вручную или привяжите его к переменной. Вы можете выбрать из тематических цветов (например, Primary) или использовать селектор цвета.
• Border Width: Установите толщину границы в пикселях.
• Border Radius: Отрегулируйте, насколько закругленными должны быть углы, с помощью опций ниже:
  • Independent Radius: Установите разные значения радиуса для верха, низа, левого и правого краев.
  • Uniform Radius: Примените одно и то же значение ко всем четырем сторонам. Ползунок и числовой ввод позволяют точно контролировать.
• Button Padding: Управляет пространством внутри виджета (между содержимым и границей).

подсказка

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