Триггеры форм

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

On Selected

Триггер действия On Selected используется для выполнения действий, когда пользователь выбирает или изменяет значение в виджете, предлагающем несколько вариантов. Этот триггер связан с виджетами форм, где требуется ввод выбора, такими как Dropdown, RadioButton, CheckboxGroup, ChoiceChips и Slider.

Возможные сценарии использования

• Dropdown – Выбор метода доставки: Пользователь выбирает метод доставки из вариантов, таких как "Standard", "Express" или "Next Day". Действие под триггером On Selected устанавливает переменную состояния приложения shippingOption, которая динамически обновляет цену или предполагаемое время доставки.
• Slider – Отображение уровня громкости в Snackbar: Пользователь регулирует ползунок Slider от 0 до 100. Триггер On Selected отображает Snackbar с текущим уровнем громкости: Volume set to: [sliderValue].
• ChoiceChips – Фильтрация продуктов по категории: Пользователь нажимает на чип, такой как "All", "Electronics" или "Clothing". Триггер On Selected может установить переменную состояния приложения (например, selectedCategory) и обновить список продуктов в соответствии с выбранной категорией.

Чтобы использовать триггер On Selected:

1. Начните с выбора поддерживаемого виджета, например Dropdown.
2. Откройте вкладку Actions в панели свойств и нажмите + Add Action.
3. Вы заметите, что Type of Action (он же callback) уже установлен в On Selected. Это означает, что добавленные действия будут вызываться при каждом изменении выбора.
4. Наконец, определите действия, которые вы хотите выполнить при выборе пользователем, такие как установка переменной, переход на другую страницу или отображение сообщения.

On Toggled On / On Toggled Off

Триггеры действий On Toggled On и On Toggled Off используются для выполнения действий, когда пользователь включает или выключает переключаемый виджет. Эти триггеры поддерживаются виджетами, такими как Checkbox, CheckboxListTile, Switch и SwitchListTile, — любыми виджетами, представляющими двоичное состояние.

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

Возможные сценарии использования

• Switch – Включение темного режима: Пользователь переключает Switch для включения темного режима. Действие под триггером On Toggled On устанавливает темный режим.
• Checkbox – Согласие с условиями: Пользователь отмечает Checkbox с надписью “I agree to the terms and conditions.” Триггер On Toggled On активирует кнопку Submit. Если пользователь снимает отметку, триггер On Toggled Off снова деактивирует кнопку.
• CheckboxListTile – Выбор каналов уведомлений: Пользователь отмечает или снимает отметку с опций, таких как Email, SMS или Push Notifications. Каждое переключение запускает либо On Toggled On, либо On Toggled Off для обновления выбранных предпочтений на бэкенде.

Чтобы использовать триггер On Toggled On или On Toggled Off:

1. Начните с выбора поддерживаемого виджета, например Switch.
2. Откройте вкладку Actions в панели свойств и нажмите + Add Action.
3. Выберите On Toggled On для определения действий при включении переключателя или On Toggled Off для действий при выключении.
4. Добавьте желаемые действия, такие как обновление переменной, отображение сообщения, активация кнопки или вызов бэкенда.

On Change

Триггер действия On Change используется для реакции на ввод пользователя в реальном времени по мере того, как он печатает или изменяет содержимое поля ввода. Этот триггер поддерживается виджетами, такими как TextField и Pincode.

Он идеален для включения валидации форм в реальном времени, обновления состояния приложения по мере ввода текста или активации/деактивации элементов интерфейса на основе текущего ввода.

Возможные сценарии использования

• TextField – Активация кнопки при вводе email: По мере ввода пользователем email в TextField действие под триггером On Change проверяет, является ли ввод действительным email. Если да, активируется кнопка Continue.
• Pincode – Автоматическая отправка при завершении: Когда пользователь завершает ввод 6-значного кода в виджет Pincode, действие под триггером On Change проверяет, введен ли полный код, и запускает отправку формы или вызов бэкенда.

Чтобы использовать триггер On Change:

1. Начните с выбора поддерживаемого виджета, например TextField.
2. Откройте вкладку Actions в панели свойств и нажмите + Add Action.
3. Выберите On Change из списка доступных триггеров.
4. Определите действия для запуска, такие как установка переменной, отображение сообщения или вызов API.

---

On Focus Change

Триггер On Focus Change срабатывает каждый раз, когда поле ввода получает или теряет фокус, например, когда пользователь нажимает на TextField или Pincode или выходит из него. Он полезен для предоставления подсказок пользователю (при получении фокуса) или выполнения валидации.

Возможные сценарии использования

• TextField – Отображение подсказки при фокусе: Когда TextField получает фокус, действие под триггером On Focus Change отображает вспомогательный текст или подсказку с инструкциями по вводу (например, “Enter your phone number without dashes”).
• Pincode – Валидация при выходе: Когда пользователь завершает ввод кода и виджет Pincode теряет фокус, действие под триггером On Focus Change запускает логику валидации, чтобы проверить, полный и действительный ли ввод, и отображает ошибку, если нет.

Чтобы использовать триггер On Focus Change:

1. Начните с выбора поддерживаемого виджета, например TextField.
2. Откройте вкладку Actions в панели свойств и нажмите + Add Action.
3. Выберите On Focus Change из списка доступных триггеров.
4. Определите действия для запуска, такие как отображение вспомогательного текста, валидация ввода или обновление интерфейса на основе фокуса.