Компоненты

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

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

Чтобы создать компонент с нуля, нажмите кнопку Добавить в области Выбор страницы или вкладке Дерево виджетов. Затем выберите Новый компонент.

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

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

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

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

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

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

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

Чтобы создать и добавить компонент, сгенерированный ИИ, откройте Дерево виджетов, нажмите кнопку Генерировать с помощью ИИ (волшебная палочка) и выберите вкладку Компонент. Далее опишите компонент, который хотите создать, и нажмите кнопку Отправить (стрелка вверх).

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

подсказка

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

Импорт из фрейма Figma

Вы также можете быстро превратить свои дизайны Figma в функциональные компоненты в FlutterFlow. Предоставив URL фрейма Figma, ИИ FlutterFlow проанализирует дизайн и автоматически сгенерирует макеты пользовательского интерфейса, которые максимально соответствуют вашему макету.

Чтобы импортировать из фрейма Figma, сначала подключите учётную запись Figma, импортируйте тему Figma и сопоставьте цвета и типографику соответственно. Далее откройте диалог Генерировать с помощью ИИ и нажмите кнопку Плюс (+). Выберите Импорт из Figma, введите URL фрейма Figma и нажмите Отправить.

Появится предварительный просмотр импортируемого фрейма. Чтобы завершить импорт, снова нажмите Отправить. После завершения компонент появится в истории генерации ИИ, где вы сможете просмотреть его и добавить в проект.

warning

На данный момент мы не поддерживаем импорт SVG-элементов из фреймов Figma. Однако после завершения генерации вы можете вручную добавить SVG напрямую в ресурсы проекта assets или заменить их в Figma на поддерживаемые форматы изображений, такие как PNG или JPEG.

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

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

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

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

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

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

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

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

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

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

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

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

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

Действия

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

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

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

к сведению

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

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

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

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

к сведению

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