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

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

Давайте рассмотрим ключевые моменты в жизненном цикле компонента:

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

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

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

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

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

Давайте узнаем больше об этом в следующих разделах:

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

Во время инициализации компонента FlutterFlow предоставляет Триггер Действия При инициализации, который помогает вам загружать ресурсы или инициализировать данные, когда компонент загружается на странице или в компоненте.

Что такое Триггеры Действий?

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

При открытии Редактора Потока Действия для вашего компонента вы увидите Триггер Действия При инициализации для вашего компонента.

При инициализации [Триггер Действия]

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

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

При нажатии сочетанием клавиш [Триггер Действия]

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

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

ПЕРЕМЕННЫЕ СОСТОЯНИЯ

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

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

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

Например,

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

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

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

Чтобы создать новую переменную Состояния компонента в вашем компоненте, выполните следующие действия:

При создании Состояния Компонента включаются следующие свойства:

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

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

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

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

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

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

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

примечание

Вы можете установить Тип данных вашей переменной состояния компонента на любые примитивные типы данных, такие как String, Integer, Boolean, Double или на любые другие сложные встроенные типы данных, такие как Enum, Пользовательский тип данных, Документ, и т. д. Чтобы узнать больше о доступных типах данных, обратитесь к разделу Представление данных.

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

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

Следуйте следующим шагам:

Обновление состояния компонента [Действие]

Значения переменной состояния компонента могут быть обновлены только с использованием действий. Всякий раз, когда вы хотите обновить состояние компонента, вызовите действие под названием Обновить состояние компонента из Редактора Потока Действия компонента.

В следующем примере мы открываем Редактор Потока Действия на родительском виджете Условный строитель и вызываем действие Обновить состояние компонента, чтобы переключить значение isFavourite.

Перестроение при обновлении

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

• Перестроить содержащую страницу: Этот параметр запускает перерисовку страницы, содержащей этот компонент.

• Перестроить текущий компонент: Этот параметр инициирует перерисовку только текущего компонента.

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

Дорогостоящие перестроения

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

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