Параметры действий (обратные вызовы)

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

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

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

• Изменить размер и сжать изображение, чтобы уменьшить объём хранимых данных.
• Обновить запись пользователя в базе данных с новым URL изображения.
• Обновить интерфейс, чтобы отобразить обновлённое фото профиля.

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

Преимущества использования обратных вызовов в FlutterFlow

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

Добавление обратных вызовов

Продолжим с нашим предыдущим примером (компонент загрузки изображения) и посмотрим, как добавить к нему обратные вызовы:

Создание параметра обратного вызова

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

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

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

Выполнение обратного вызова

Вы можете выполнить действие, переданное в компонент, с помощью действия Execute Callback в потоках действий компонента.

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

Передача действия в компонент

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

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

к сведению

Вы можете получить доступ к значению, переданному в обратный вызов, перейдя в меню Set Variable > Callback Parameters.

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

Дополнительные примеры

Давайте рассмотрим ещё несколько примеров добавления параметров действий (обратных вызовов), чтобы углубить понимание и применить их в реальных сценариях.

Пример 1: Динамический компонент диалога

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

Конкретная логика для каждого действия определяется родительским компонентом или страницей, использующей диалог. Сам диалог не должен знать, что именно должно произойти — он просто выполняет обратный вызов, переданный ему, когда пользователь нажимает кнопку «Да».

Пример 2: Пользовательская панель навигации в Super App

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

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

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