Компоненты

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

Создание компонента с нуля

Чтобы создать компонент с нуля, нажмите Add Button во вкладке Page Selector или Widget Tree. Затем выберите New Component.

Преобразование в компонент

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

Чтобы преобразовать сложный виджет в компонент, щелкните правой кнопкой мыши на корневом виджете, содержащем всё дерево, которое вы хотите преобразовать, и выберите Convert to Component.

Создание компонента из популярного шаблона

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

Создание компонента с помощью ИИ

Функция AI Gen FlutterFlow позволяет создавать различные элементы, включая компоненты, с помощью запроса. Это может быть особенно полезно, если вы не уверены, с чего начать. После генерации компонента вы можете просмотреть его в различных цветовых схемах, светлых и тёмных темах, и внести желаемые изменения.

Панель свойств компонента

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

Вот подробный обзор того, что можно найти и изменить в этой панели:

Параметры компонента

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

Создание параметра компонента

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

Привязка параметра

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

Пример, как привязать созданные параметры в ProfileListItem к их виджетам и триггерам действий.

Помимо стандартных типов данных, вы можете создавать параметры следующих типов:

• Action (callback): Позволяет передавать действия в компонент. Компонент может вызывать это действие, обычно как обратный вызов, в своих потоках действий. Callback используется для обработки событий, например, обновления состояния родителя при нажатии кнопки. Подробнее о использовании callback можно узнать здесь.

• Widget Builders: Widget builders позволяют передавать виджеты, которые будут использоваться в дереве виджетов компонента. Это особенно полезно, когда нужно динамически менять содержимое определённой части компонента, например, для отображения элемента в настраиваемом выпадающем списке или создания компонента для единообразного макета. Подробнее о использовании Widget Builders можно узнать здесь.

Действия

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

Добавление действия к элементу компонента идентично добавлению действий к любому элементу страницы. Краткий обзор:

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

к сведению

Чтобы узнать больше о жизненном цикле компонентов и добавлении действия On Initialization, см. здесь.

Управление состоянием

Компоненты могут иметь свои собственные внутренние переменные состояния для отслеживания информации, такой как ввод в форму, переключатели или другие взаимодействия. Компоненты могут обновлять своё состояние в ответ на действия пользователя (например, нажатие кнопки) или внешние события (например, получение новых данных от API).

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

к сведению

Узнайте, как Создать переменную состояния для компонентов и как Обновить её.