Триггеры действий

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

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

Типы триггеров действий

Триггеры на уровне страницы и корня компонента

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

Подробнее об этих триггерах см. на страницах Действия страниц и жизненный цикл и Действия компонентов и жизненный цикл.

Базовые триггеры

FlutterFlow предоставляет несколько базовых триггеров действий, которые легко добавить:

• On Tap: Этот триггер активируется, когда пользователь нажимает на виджет. Например, его можно использовать для отображения сообщения Snackbar при нажатии на кнопку.
• On Double Tap: Этот триггер активируется, когда пользователь быстро нажимает на виджет дважды. Типичный пример — увеличение изображения или фото при двойном нажатии.
• On Long Press: Этот триггер активируется, когда пользователь нажимает и удерживает виджет в течение длительного времени. Распространенный сценарий — отображение дополнительных опций или контекстного меню, например возможность удалить или переименовать файл при долгом нажатии на него.

Вот пример отображения сообщения при нажатии кнопки с использованием триггера On Tap:

Специфические триггеры виджетов

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

• On Submit: Активируется на виджете TextField, когда пользователь нажимает «submit» или «done», завершая ввод текста.
• On Page Load: Доступен на виджете страницы; этот триггер активируется сразу после загрузки страницы и полезен для задач вроде загрузки данных или обновления содержимого.
• On Phone Shake: Специфичен для виджета страницы; этот триггер реагирует на физическое встряхивание устройства и часто используется в играх для действий вроде броска кубика.
• On Selected: Присутствует на виджетах вроде Dropdowns, CheckboxGroups, Sliders, RadioButtons, ChoiceChips и RatingBars; этот триггер активируется при любом изменении выбора.
• On Page Swipe: Доступен на виджете PageView для запуска действий при свайпе страницы.
• On Toggle: Доступен на виджете ToggleIcon; этот триггер реагирует каждый раз при активации переключателя.
• On Completed, On Change: Специфичны для виджета PinCode; эти триггеры активируются, когда пользователь завершает или изменяет ввод PIN-кода.
• On Count Changed: Присутствует в виджете CountController; этот триггер реагирует на изменения счетчика.

Триггеры Gesture Detector

Триггеры Gesture Detector позволяют реагировать на жесты пользователя, такие как нажатия, перетаскивания, свайпы и щипки. Эти триггеры вызываются на основе конкретных жестов и позволяют добавлять действия в ответ на взаимодействия пользователя. Например, триггер onDoubleTap вызывается всякий раз, когда пользователь быстро нажимает дважды на виджет, что можно использовать для переключения состояния «лайка» или увеличения содержимого.

Эти триггеры доступны при добавлении действия на Container.

Этапы жизненного цикла

Жизненный цикл триггеров жестов включает четыре ключевых этапа: Start, Update, End/Stop и Cancel. Эти этапы определяют, как обнаруживаются и обрабатываются жесты — от начального взаимодействия до завершения или отмены. Понимание этого жизненного цикла критически важно для создания интуитивных взаимодействий на основе жестов в приложении.

Жизненный цикл жеста нажатия

Жесты нажатия имеют более простой жизненный цикл, который в основном фокусируется на обнаружении нажатий и определении, завершаются ли они или отменяются. Вот как работает жизненный цикл нажатия:

1. Down: Этот этап начинается, когда пользователь касается экрана пальцем, чтобы инициировать нажатие. Например: onTapDown активируется, когда пользователь касается экрана, чтобы начать нажатие.
2. Up: Жест нажатия завершается, когда пользователь убирает палец с экрана. Например: onTapUp активируется, когда пользователь завершает нажатие, убирая палец.
3. Tap: После успешного завершения обоих предыдущих действий onTap активируется, указывая на полное выполнение жеста нажатия.
4. Cancel: Если пользователь слишком сильно сдвигает палец перед тем, как убрать его, нажатие отменяется, предотвращая завершение действия. Например: onTapCancel будет вызван, а onTap не активируется.

Вот как протекает жизненный цикл для жестов нажатия:

Жизненный цикл жеста перетаскивания

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

1. Start: Этот этап происходит, когда пользователь начинает перетаскивать палец по экрану. Например: onHorizontalDragStart активируется при инициации горизонтального перетаскивания.
2. Update: Во время перетаскивания отслеживается движение жеста, что позволяет захватывать данные в реальном времени, такие как позиция указателя или дельта-значения. Например: onHorizontalDragUpdate активируется по мере того, как пользователь перетаскивает палец, позволяя приложению отслеживать прогресс перетаскивания.
3. End/Stop: Жест перетаскивания завершается, когда пользователь убирает палец, финализируя взаимодействие. Например: onHorizontalDragEnd активируется, когда пользователь завершает перетаскивание и убирает палец с экрана.
4. Cancel: Если жест перетаскивания прерывается до завершения (например, другим жестом), он отменяется. Например: onHorizontalDragCancel активируется, если перетаскивание прерывается до завершения.

Вот как протекает жизненный цикл для жестов перетаскивания:

Отмена жеста перетаскивания

Для жестов перетаскивания жизненный цикл не всегда строго следует последовательности Start, Update, End/Stop. Этап Cancel может произойти в любой момент, даже до End/Stop, в зависимости от взаимодействия. Это отличается от жестов нажатия, поскольку перетаскивание может быть отменено после начала или даже во время обновления.

Например, если горизонтальное перетаскивание прерывается до завершения (например, если другой жест получает приоритет), активируется onHorizontalDragCancel вместо onHorizontalDragEnd.

Доступные триггеры Gesture Detector

Ниже приведен полный список доступных триггеров Gesture Detector в FlutterFlow для расширения возможностей взаимодействий на основе жестов.

• onDoubleTapCancel: Активируется, когда жест двойного нажатия распознается, но не завершается успешно.
• onDoubleTapDown: Активируется, когда пользователь нажимает на экран для первого нажатия в последовательности двойного нажатия.
• onForcePressEnd: Активируется, когда пользователь отпускает нажатие, превышающее определенный порог силы.
• onForcePressPeak: Активируется, когда сила нажатия достигает пика.
• onForcePressStart: Активируется, когда пользователь начинает нажимать с достаточной силой, чтобы превысить заданный порог.
• onForcePressUpdate: Активируется, когда пользователь изменяет величину давления во время нажатия.
• onHorizontalDragCancel: Активируется, когда горизонтальный жест перетаскивания прерывается или отменяется.
• onHorizontalDragDown: Активируется, когда пользователь впервые касается экрана и инициирует горизонтальное перетаскивание.
• onHorizontalDragEnd: Активируется, когда пользователь завершает горизонтальный жест перетаскивания.
• onHorizontalDragStart: Активируется, когда пользователь начинает горизонтальный жест перетаскивания.
• onHorizontalDragUpdate: Активируется непрерывно по мере горизонтального перетаскивания пользователем.
• onLongPressCancel: Активируется, когда жест долгого нажатия распознается, но не завершается.
• onLongPressDown: Активируется, когда пользователь впервые нажимает на экран с намерением долгого нажатия.
• onLongPressEnd: Активируется, когда пользователь отпускает долгое нажатие.
• onLongPressMoveUpdate: Активируется по мере перемещения пальца пользователем во время удержания долгого нажатия.
• onLongPressStart: Активируется, когда жест долгого нажатия начинается после удержания в течение требуемого времени.
• onLongPressUp: Активируется, когда пользователь отпускает долгое нажатие после времени удержания.
• onPanCancel: Активируется, когда жест панорамирования (общее перетаскивание) прерывается или отменяется.
• onPanDown: Активируется, когда пользователь впервые касается экрана с намерением панорамирования.
• onPanEnd: Активируется, когда пользователь завершает жест панорамирования.
• onPanStart: Активируется, когда пользователь начинает жест панорамирования.
• onPanUpdate: Активируется непрерывно по мере перетаскивания пальцем по экрану.
• onScaleEnd: Активируется, когда пользователь завершает жест масштабирования, например щипок для зума.
• onScaleStart: Активируется, когда пользователь начинает жест масштабирования.
• onScaleUpdate: Активируется непрерывно по мере изменения масштаба пользователем (например, увеличения или уменьшения).
• onSecondaryLongPress: Активируется, когда пользователь нажимает и удерживает с использованием вторичного указателя (например, двухпальцевого нажатия).
• onSecondaryLongPressCancel: Активируется, когда вторичный жест долгого нажатия распознается, но не завершается.
• onSecondaryLongPressDown: Активируется, когда пользователь впервые касается экрана вторичным указателем с намерением долгого нажатия.
• onSecondaryLongPressEnd: Активируется, когда пользователь отпускает вторичное долгое нажатие.
• onSecondaryLongPressMoveUpdate: Активируется по мере перемещения вторичного указателя во время удержания долгого нажатия.
• onSecondaryLongPressStart: Активируется, когда вторичный жест долгого нажатия начинается после удержания в течение требуемого времени.
• onSecondaryLongPressUp: Активируется, когда пользователь отпускает вторичное долгое нажатие после времени удержания.
• onSecondaryTap: Активируется, когда пользователь нажимает вторичным указателем (например, двухпальцевым нажатием).
• onSecondaryTapCancel: Активируется, когда вторичный жест нажатия распознается, но не завершается.
• onSecondaryTapDown: Активируется, когда пользователь впервые касается экрана вторичным указателем с намерением нажатия.
• onSecondaryTapUp: Активируется, когда пользователь отпускает экран после вторичного нажатия.
• onTapCancel: Активируется, когда жест нажатия распознается, но не завершается успешно.
• onTapDown: Активируется, когда пользователь впервые касается экрана с намерением нажатия.
• onTapUp: Активируется, когда пользователь отпускает экран после нажатия.
• onTertiaryLongPress: Активируется, когда пользователь нажимает и удерживает с использованием третичного указателя (например, трехпальцевого нажатия).
• onTertiaryLongPressCancel: Активируется, когда третичный жест долгого нажатия распознается, но не завершается.
• onTertiaryLongPressDown: Активируется, когда пользователь впервые касается экрана третичным указателем с намерением долгого нажатия.
• onTertiaryLongPressEnd: Активируется, когда пользователь отпускает третичное долгое нажатие.
• onTertiaryLongPressMoveUpdate: Активируется по мере перемещения третичного указателя во время удержания долгого нажатия.
• onTertiaryLongPressStart: Активируется, когда третичный жест долгого нажатия начинается после удержания в течение требуемого времени.
• onTertiaryLongPressUp: Активируется, когда пользователь отпускает третичное долгое нажатие после времени удержания.
• onTertiaryTapCancel: Активируется, когда третичный жест нажатия распознается, но не завершается успешно.
• onTertiaryTapDown: Активируется, когда пользователь впервые касается экрана третичным указателем с намерением нажатия.
• onTertiaryTapUp: Активируется, когда пользователь отпускает экран после третичного нажатия.
• onVerticalDragCancel: Активируется, когда вертикальный жест перетаскивания прерывается или отменяется.
• onVerticalDragDown: Активируется, когда пользователь впервые касается экрана и инициирует вертикальное перетаскивание.
• onVerticalDragEnd: Активируется, когда пользователь завершает вертикальный жест перетаскивания.
• onVerticalDragStart: Активируется, когда пользователь начинает вертикальный жест перетаскивания.
• onVerticalDragUpdate: Активируется непрерывно по мере вертикального перетаскивания пользователем.

Доступ к данным Gesture Detector

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

Примеры использования данных жестов включают:

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

Вы можете получить доступ к данным Gesture Detector после добавления соответствующих триггеров Gesture Detector. После добавления эти данные можно извлечь через меню Set from Variable в Action Flow Editor. В зависимости от ваших конкретных нужд вы можете выбрать из следующих опций:

• Global Position X: Координата x указателя относительно левого края экрана на момент активации жеста.
• Global Position Y: Координата y указателя относительно верхнего края экрана на момент активации жеста.
• Local Position X: Координата x указателя относительно левого края виджета, к которому применены триггеры действий.
• Local Position Y: Координата y указателя относительно верхнего края виджета, к которому применены триггеры действий.
• Delta X: Горизонтальное расстояние, пройденное указателем во время жеста.
• Delta Y: Вертикальное расстояние, пройденное указателем во время жеста.

См., как эффективно использовать триггеры Gesture Detector и получать доступ к данным XY, в следующем примере.

Пример: Свайп для удаления элементов корзины

Давайте разберем пример, демонстрирующий, как реализовать функцию «Свайп для удаления» для элементов корзины полностью с использованием Gesture Detector. Вот предварительный просмотр работы:

Вот как это сделать:

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

   

2. Теперь, чтобы элемент перемещался по мере перетаскивания пользователем, мы добавляем анимацию слайда (в разделе On Action Trigger) к Container, который содержит макет элемента. При настройке анимации установите Duration в 0 и Final Position в переменную offsetX. Это гарантирует, что элемент следует за пальцем пользователя при свайпе.

   к сведению

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

   

3. На основном Container мы добавляем триггер действия onHorizontalDragUpdate. Он будет вызываться непрерывно по мере горизонтального перетаскивания элемента пользователем. При этом событии мы обновляем переменную offsetX новой позицией на основе движения свайпа (используя данные Delta X) и запускаем анимацию. Это обновление в реальном времени заставляет элемент скользить по экрану.

4. Теперь нам нужно проверить, достигает ли свайп порога для удаления элемента или сбросить позицию элемента обратно к исходному месту. Для этого мы добавляем триггер onHorizontalDragEnd. В триггере onHorizontalDragEnd мы проверяем, превышает ли значение offsetX 100. Если да, мы отправляем индекс элемента обратно на страницу или компонент (через действие execute callback), чтобы удалить элемент из списка. Если нет, мы отменяем анимацию слайда. Наконец, мы сбрасываем значение offsetX в 0, чтобы оно было готово к следующему взаимодействию.