Состояние виджета

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

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

Ключевые моменты:

• Динамические данные: Представляют значения, которые изменяются со временем (например, ввод пользователя в текстовом поле).
• Автоматическое управление: FlutterFlow управляет состоянием, поэтому разработчикам не нужно писать явный код для управления состоянием.
• Реактивные обновления: Изменения в состоянии автоматически обновляют отображение виджета.

Управление состояниями виджетов

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

Некоторые примеры состояний виджетов, доступных в FlutterFlow:

• Текстовые поля: Состояние текстовых полей управляется автоматически, включая вводимый текст и состояния валидации.
• Флажки: Состояние флажков управляется, указывая, отмечены они или нет.
• Переключатели: Состояние переключателей управляется, чтобы отражать выбранный вариант.

В следующем примере показано, как состояние виджета и состояние фокуса виджета для TextField доступны в FlutterFlow на странице, где он был создан, и предлагаются как вариант в меню переменных.

Область действия

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

Например, рассмотрите компонент с двумя TextFields — одним для имени пользователя и другим для пароля. Этот компонент может использоваться как на странице входа в систему, так и на странице регистрации. В таких случаях необходимо уметь получать значения из каждого TextField так, будто они были добавлены непосредственно на страницу.

Вы можете получить доступ к состоянию виджета виджетов компонента на своей странице так же, как и для других виджетов. Просто перейдите в меню Set Variable > Widget State > [component_name] > [your_widget].

FlutterFlow позволяет обновлять состояние этих виджетов с помощью действий, доступных на платформе. Например, если вы хотите очистить текстовое поле при нажатии кнопки Отправить на странице, похожей на форму, то в Actions Flow вы можете найти соответствующие действия, такие как Clear TextField. Это позволяет создавать динамические взаимодействия и управление состоянием непосредственно в визуальной среде разработки.

Триггеры действий для виджетов форм

FlutterFlow позволяет привязывать триггеры действий к состояниям виджетов, например, вызывать API при изменении фокуса текстового поля или изменять внешний вид кнопки, когда флажок отмечен.

Наиболее распространенные триггеры действий, доступные для виджетов форм:

• On Focus Change: Срабатывает, когда виджет, такой как текстовое поле, получает или теряет фокус. Например, отображение дополнительных подсказок или сообщений валидации, когда пользователь начинает вводить текст в текстовом поле.

• On Submit: Срабатывает при отправке формы или текстового поля. Например, валидация ввода и отправка данных, когда пользователь нажимает клавишу Enter или кликает кнопку отправки.

• On Change: Срабатывает при изменении значения виджета. Например, валидация в реальном времени или обновление состояния по мере ввода пользователем текста в текстовом поле или изменения выбора в выпадающем списке.

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

• On Selected: Срабатывает при выборе варианта в виджетах, таких как чипы выбора, флажки, переключатели или ползунки. Например, обновление интерфейса или выполнение действий на основе выбранного варианта.

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