Действия в FlutterFlow

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

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

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

Большинство виджетов могут обрабатывать три основных типа действий:

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

Помимо этих общих типов действий, есть еще несколько типов действий, которые доступны для некоторых специфических виджетов:

• On Submit: Это действие доступно для виджета TextField. Действие срабатывает, когда пользователь заканчивает редактирование текста и показывает, что он закончил, например, нажимает кнопку «submit» или «done» на клавиатуре.
• При загрузке страницы: Действие доступно для виджета страницы. Действие запускается сразу после загрузки страницы и может быть использовано для выполнения различных задач, таких как получение данных из базы данных, отображение сообщения или уведомления или обновление содержимого страницы. Используя это действие, вы можете обеспечить автоматическое выполнение определенных задач при загрузке страницы, не требуя дополнительного ввода данных пользователем.
• Встряхивание телефона: Эта функция доступна на виджете страницы и срабатывает при физическом встряхивании телефона. При встряхивании телефона будет выполнено заданное действие, которое может включать различные функции, такие как отображение сообщения, открытие новой страницы или инициирование телефонного звонка. Эта функция обычно используется в игровых приложениях, где встряхивание телефона может вызвать определенное действие, например, бросок костей или тасование карт.
• При выборе: Это действие может быть применено к выпадающему окну, группе флажков, слайдеру, радиокнопке, ChoiceChips, RatingBar и т.д. Это действие срабатывает, как только выбор меняется на этих виджетах.
• On Page Swipe: Это действие доступно для виджета PageView. Действие, добавленное под ним, срабатывает всякий раз, когда страница пролистывается.
• On Toggle: Эта функция доступна для виджета ToggleIcon. Действия, добавленные в этом поле, запускаются каждый раз, когда щелкается значок переключения.
• On Completed, On Change: Эта функция доступна для виджета PinCode. Действия, добавленные под этим параметром, срабатывают, когда пользователь завершает ввод пина или изменяет пин в виджете PinCode.
• On Count Changed: Эта функция доступна для виджета CountController. Действия, добавленные под этим параметром, срабатывают при изменении счета в виджете CountController.

Чтобы добавить действие на любой виджет:

1. Выберите виджет (например, кнопку), для которого вы хотите добавить действие.
2. Выберите Действия на панели свойств (правое меню).
3. Чтобы добавить простое действие, например, переход на страницу или показ сообщения на заставке:
   1. Нажмите кнопку + Добавить действие.
   2. Выберите Тип действия. По умолчанию установлено значение «При касании».
   3. Найдите и выберите действие.

4.Чтобы добавить несколько действий, действия, основанные на условии, или сложный поток действий:

1. Нажмите + Добавить условное действие. Откроется редактор потока действий.
2. Чтобы добавить новое действие в тот же поток действий, используйте кнопку +.

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

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

Условное действие можно добавить следующими способами:

• Одно условие
• Несколько условий
• Условное действие с несколькими ветвями (если > else если > else)

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

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

Чтобы добавить одно условие:

1. Выберите виджет (например, кнопку), для которого вы хотите добавить действие.
2. Выберите Действия на панели свойств (правое меню) и нажмите + Добавить условное действие.
3. В меню Set Variable выберите Conditions > Single Condition.
4. Нажмите на Первое значение и Установить переменную (например, переменную состояния приложения).
5. Укажите, как вы хотите сравнить первое значение со вторым (например, Equal To, Less Than и т.д.).
6. Нажмите на Second Value и укажите значение, выбрав Specific Value или From Variable.
7. В ветке True (Истина) добавьте действия, которые должны срабатывать, когда условие истинно.
8. В ветке Flase добавьте действия, которые будут срабатывать, если условие ложно.

Вот пример добавления условного действия, которое проверяет, превышает ли возраст пользователя 18 лет, и на основании этого запускает различные действия:

Совет: Вы также можете напрямую задать булево значение, которое возвращает true или false. Вот пример запуска действий для установки темного или светлого режима темы на основе булевой переменной ‘isDarkMode’ из переменной состояния приложения.

Множественные условия полезны, когда вам нужно запустить действия на основе набора условий, которые приводят к ветви True или False. В этом случае несколько условий оцениваются последовательно, и при выполнении всех условий запускается действие в ветви True. Если хотя бы одно из условий не выполнено, выполняется действие по ветви False.

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

• Запускать действия, только если пользователь является администратором и находится в режиме редактирования.
• В приложении электронной коммерции принимать решение о способе доставки на основе адреса назначения или общей суммы заказа.
• В приложении погоды, если текущая температура выше 80 градусов по Фаренгейту, а влажность выше 70%, показать диалог предупреждения о необходимости оставаться увлажненным.

Чтобы добавить несколько условий:

1. Выберите виджет (например, кнопку), на который вы хотите добавить действие.
2. Выберите Действия на панели свойств (правое меню) и нажмите + Добавить условное действие.
3. В меню Задать переменную выберите Условия > Объединить условия.
4. В разделе Первое условие нажмите UNSET и добавьте единственное условие или напрямую укажите переменную, которая возвращает булево значение (True/False).
5. Если вы хотите, чтобы все условия были истинными, удерживайте вкладку AND выбранной. А если вы хотите, чтобы какое-либо одно условие было истинным, измените его на OR.
6. Аналогично добавьте следующее условие.
7. Чтобы добавить больше условий, нажмите на кнопку + Добавить.
8. В ветке True добавьте действия, которые должны срабатывать, когда все условия истинны.
9. В ветке Flase добавьте действия, которые будут срабатывать, если условие не выполняется.

Совет: Вы также можете смешивать несколько условий AND с условиями OR. Вот пример запуска действия удаления, когда пользователь является либо администратором, либо менеджером событий И вошел в систему.

Вместо простой ветви true/false теперь можно использовать несколько ветвей типа if/else, чтобы добавить более сложную и динамичную бизнес-логику в приложение. Например, если товар есть на складе, перенаправить пользователя на страницу корзины. Если товара нет на складе, но он доступен для предварительного заказа, показать сообщение, а затем открыть страницу корзины, а если оба условия не выполняются, показать сообщение «нет в наличии».

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

При выполнении условного действия сначала оценивается раздел IF. Если его условие выполняется, то действие в ветви IF будет выполнено. Если нет, то оценивается следующий раздел ELSEIF, и проверяется его условие. Если условие выполняется, то выполняется действие в ветви ELSEIF. Этот процесс продолжается до тех пор, пока либо не будет выполнено условие, либо не будут оценены все секции ELSEIF. Если ни одно из условий не выполнено, будет выполнено действие в ветви ELSE.

Чтобы добавить условное действие с несколькими ветвями:

1. Выберите виджет (например, кнопку), для которого вы хотите добавить действие.
2. Выберите Действия на панели свойств (правое меню) и нажмите + Добавить условное действие.
3. Включите несколько условий.
4. В первом условии (т.е. IF) нажмите на UNSET и задайте либо одно условие, либо несколько условий, либо напрямую задайте булеву переменную.
5. Чтобы добавить еще одну ветвь, нажмите на кнопку +. Откроется еще одна ветвь под названием ELSEIF. Добавьте условие и здесь. Аналогичным образом вы можете добавить еще несколько ветвей и определить условия для каждой из них.
6. Теперь начните добавлять действия в каждую ветвь, включая ветвь ELSE.

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

Для этого просто нажмите на кнопку + и выберите опцию Add Terminate.

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

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

В процессе создания приложения вам может понадобиться скопировать действие (возможно, длинное или сложное) и вставить/добавить его в виджет на той же или другой странице.

Чтобы скопировать действия:

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

3. Чтобы скопировать все действия под выбранными действиями, выберите Копировать цепочку действий.

4. Чтобы вставить скопированное действие в другой виджет, выберите виджет (на той же или другой странице), перейдите на панель свойств, выберите Действия и нажмите кнопку

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

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

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

Чтобы удалить действие(я), добавленное в виджет:

1. Выберите плитку действия и нажмите на значок меню опций (три точки в правом верхнем углу).
2. Чтобы удалить только выбранное действие, выберите Удалить действие.

3. Чтобы удалить все действия под выбранными действиями, выберите Копировать цепочку действий.