Действия компонентов и жизненный цикл

В FlutterFlow знание жизненного цикла компонента критически важно для управления состоянием и оптимизации производительности вашего приложения.

Давайте разберём ключевые этапы жизненного цикла Component:

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

• Инициализация: Действия, определённые в On Initialization Action Trigger, выполняются на этом этапе. Например, вы можете инициализировать локальные переменные состояния начальными значениями или запустить анимации компонента. На этом этапе также создаются переменные состояния компонента с их значениями по умолчанию (если они заданы). Эти переменные содержат данные, специфичные для компонента, такие как ввод в формы или состояния переключателей, и необходимы для управления внутренним состоянием компонента.

• Обновление: Во время использования компонент может получать обновлённые параметры от родителя при его перестройке, что позволяет компоненту соответственно корректировать своё поведение и внешний вид. При обновлении переменных состояния внутри компонента вы можете выбрать перестройку только самого компонента или всей страницы, содержащей этот компонент. Эта динамическая обновляемость критически важна для поддержания отзывчивого и интерактивного пользовательского опыта.

• Уничтожение: Когда компонент больше не нужен, например, при переходе пользователя на другую страницу или явном удалении компонента, он уничтожается.

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

Подробнее о них — в следующих разделах:

Триггеры действий инициализации

Во время инициализации Component FlutterFlow предоставляет On Initialization Action Trigger, которые помогают загружать ресурсы или инициализировать данные при загрузке компонента на странице или в другом компоненте.

Что такое Action Triggers?

Action Triggers служат обработчиками событий или слушателями, которые реагируют на конкретные события или взаимодействия пользователя в приложении. FlutterFlow позволяет разработчикам определять логику, реагирующую на различные события, такие как нажатия кнопок, загрузку страниц, отправку форм или изменения данных. Подробнее см. в разделе Action Flow Editor.

При открытии Action Flow Editor для вашего компонента вы увидите On Initialization Action Trigger, доступный для Component.

On Initialization [Action Trigger]

On Initialization action trigger в FlutterFlow позволяет определять действия, которые должны выполняться при загрузке или инициализации компонента, например, настройка необходимых данных, переменных состояния или других задач инициализации.

Если компонент перестаёт отображаться в UI, а затем снова становится видимым, действия под On Initialization action trigger будут повторно запущены, чтобы любые задачи настройки выполнились заново. Для динамически генерируемых компонентов, таких как в ListView с запросом, каждый экземпляр запустит действия под On Initialization action trigger при создании.

On Shortcut Press [Action Trigger]

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

On Dispose [Action Trigger]

On Dispose action trigger для компонентов позволяет определять действия, которые выполняются при переходе со страницы, содержащей компонент, или при его удалении из памяти. Это особенно полезно для остановки продолжающихся операций.

Представьте сценарий, где periodic action, например, получение обновлений погоды в реальном времени, запускается в компоненте при его загрузке (т. е. On Initialization). Действие выполняется периодически, предоставляя обновления данных в реальном времени, пока компонент активен. Однако при переходе на другую страницу, содержащую компонент, необходимо остановить periodic action, чтобы сэкономить ресурсы и избежать ненужной обработки. Используя On Dispose action trigger, вы можете безопасно остановить периодические обновления и очистить связанные ресурсы.

к сведению

On Dispose action trigger всегда выполняется перед On Dispose родительской страницы. Это гарантирует, что компонент сначала очистит свои ресурсы, позволяя родителю завершить уничтожение без зависимостей от дочернего элемента.

Состояние компонента

STATE VARIABLES

Переменная состояния хранит информацию или данные о вашем UI в любой данный момент. Подробнее о состояниях и управлении состоянием см. здесь. (../../../ff-concepts/state-management/state-variables.md)

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

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

Например,

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

При изменении значения переменной состояния компонента компонент может быть перестроен с обновлёнными значениями, отображая последнее состояние компонента с этими обновлениями.

Создание состояния компонента

Чтобы создать новую Component State variable в вашем компоненте, выполните следующие шаги:

При создании Component State включены следующие свойства:

• Is List: Это свойство определяет, может ли переменная содержать несколько значений одного типа данных (как список или массив) или только одно значение.

• Initial Field Value: Это свойство задаёт значение по умолчанию для переменной при её первом создании. Это как установка начальной точки или значения, с которого переменная начинается до каких-либо других событий.

• Nullable: Это свойство определяет, может ли переменная иметь значение null. Когда "Nullable" установлено в true, это означает, что переменная может быть пустой или иметь значение null. Это полезно при работе с необязательными данными или сценариями, где отсутствие значения допустимо.

Теперь применим эти концепции к переменной isFavourite в контексте приведённого выше примера:

• Для переменной isFavourite это одиночное значение (boolean), поэтому Is List будет установлено в false.

• Initial Field Value также будет установлено в false, что указывает, что элемент не добавлен в избранное по умолчанию.

• Свойство Nullable будет установлено в false, поскольку переменная всегда должна иметь булево значение (true или false) и никогда не быть null.

примечание

Вы можете установить Data Type для переменной состояния компонента в любой примитивный тип данных, такой как String, Integer, Boolean, Double, или в любой другой сложный встроенный тип данных, такой как Enum, Custom Data Type, Document и т. д. Подробнее о доступных типах данных см. в разделе Data Representation Section.

Получение значения состояния компонента

В следующем примере мы демонстрируем, как переключать иконку сердца с контурной на заполненную на основе переменной состояния isFavourite. Мы вводим виджет Conditional Builder, который позволяет отображать дерево виджетов на основе условий If/Else If/Else. Цель — визуально указать, добавлен ли продукт в избранное пользователем.

Выполните шаги ниже:

Update Component State [Action]

Значения Component state можно обновлять только с помощью действий. Чтобы обновить состояние компонента, вызовите действие Update Component State из Action Flow Editor компонента.

В следующем демо мы открываем Action Flow Editor на родительском виджете Conditional Builder и вызываем действие Update Component State, чтобы переключить значение isFavourite.

Rebuild on Update

При обновлении состояния компонента в FlutterFlow вы часто сталкиваетесь со свойством Update Type в свойствах действия. Вот что оно означает:

• Rebuild Containing Page: Этот вариант запускает перерисовку страницы, содержащей компонент.

• Rebuild Current Component: Этот вариант запускает перерисовку только текущего компонента.

• No Rebuild: Выберите этот вариант, когда нужно обновить значение состояния без немедленного отражения изменений в UI.

подсказка

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

Expensive Rebuilds

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

Подробнее о том, что происходит за кулисами, см. в разделе Generated Page.