Перейти к основному содержимому

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

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

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

Основные моменты:

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

widget-state.png

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

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

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

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

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

using-widget-state.png

Область

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

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

Вы можете получить доступ к состоянию виджета виджета компонента на вашей странице так же, как для других виджетов. Просто перейдите в меню Установить переменную > Состояние виджета > [имя компонента] > [ваш виджет].

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

managing-widget-state.png

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

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

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

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

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

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

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

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

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

action-triggers-widget-state.png