Действия

Интерактивность складывается из двух вещей:

  1. приложение слышит событие (триггер действия);
  2. приложение на него отвечает (действие).

Триггер — это событие, действие — то, что выполняется в ответ. Частые триггеры:

  • On Tap — нажатие на виджет или кнопку.
  • On Selected — выбор пункта в выпадающем списке.
  • On Page Load — загрузка страницы.

Действие — операция, которая выполняется, когда триггер сработал.

Редактор действий

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

Редактор действий

Триггеры

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

инфо

Подробно о триггерах и их видах — в отдельном разделе.

внимание
Триггеры задаёт FlutterFlow

Создавать свои триггеры нельзя: работать можно только с теми, что предлагает редактор.

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

инфо

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

Узловой редактор

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

Действия в узловом редакторе выполняются последовательно: значение, которое вернуло одно действие, доступно следующим.

совет
Синхронно и асинхронно

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

Создание действия

По нажатию на плюс доступны варианты:

  1. Add Action — один узел действия. Так добавляются последовательные шаги.

  2. Add Conditional Action — условный узел: логическое выражение и две ветки, каждая со своими действиями.

  3. Add Loop — цикл: логическое выражение и поток действий внутри. Действия повторяются, пока выражение истинно, — как в цикле while.

  4. Add Parallel — две ветки действий, выполняемые одновременно.

  5. Paste Action(s) — вставить ранее скопированные действия.

Созданный узел — это пустая функция: чтобы она заработала, в правой панели выбирают тип действия и заполняют его настройки.

Правая панель

Правая панель отвечает за две вещи:

  1. выбор действия для текущего узла;
  2. настройку действия — его свойств, параметров и имён возвращаемых значений.

Привязка к виджету

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

Привязка к виджету

инфо

Переименуете виджет — привязка обновится сама, и логику по-прежнему будет легко найти.

Ошибки и предупреждения

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

Ошибки

Блоки действий

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

action-block.avif

совет
Подробнее о блоках

Какими бывают блоки действий и чем отличаются их области видимости.

Пример: добавляем действие

Короткая демонстрация: одно действие и цепочка из нескольких.

перевод официальной документации FlutterFlow

обновлено

ESC