Жизненный цикл компонента

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

Ключевые моменты в жизни компонента:

• Создание. Вхождения компонента создаются по мере надобности — когда он появляется на странице или внутри другого компонента. Ресурсы не тратятся заранее.

• Инициализация. Выполняются действия из триггера On Initialization: например, задаются начальные значения локальных переменных или запускается анимация. Здесь же создаются переменные состояния компонента со значениями по умолчанию — те самые, что хранят введённые данные и положение переключателей.

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

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

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

Триггеры инициализации

При инициализации компонента доступен триггер On Initialization — в нём загружают данные и готовят всё, что компоненту понадобится сразу после появления.

Триггер виден в редакторе действий компонента.

On Initialization

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

Если компонент пропал из интерфейса и снова появился, действия выполнятся заново. У компонентов, создаваемых динамически — скажем, в ListView с запросом, — триггер срабатывает для каждого созданного вхождения.

On Shortcut Press

Компонент умеет реагировать и на сочетания клавиш. Как это настраивается, описано в разделе о клавиатурных сокращениях.

On Dispose

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

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

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

Состояние компонента — то, что компонент знает о себе: активна ли кнопка, где стоит ползунок, что сейчас в списке. Такие переменные видны только внутри своего компонента.

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

Например:

• в собственном выпадающем списке переменная хранит выбранный пункт;
• в переключателе — включённое или выключенное положение.

Так компонент сохраняет своё состояние, пока пользователь с ним работает.

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

Создание переменной

Порядок действий:

При создании задаются три свойства:

• Is List — переменная хранит список значений одного типа, а не одно значение.

• Initial Field Value — начальное значение, с которым переменная появляется.

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

Посмотрим на них применительно к переменной isFavourite из примера:

• Is List выключено: значение одно, логического типа.

• Initial Field Value — false: по умолчанию товар не добавлен в избранное.

• Nullable выключено: у переменной всегда есть значение — true или false, третьего не дано.

Чтение значения

Разберём пример: иконка-сердце меняется с контурной на залитую в зависимости от переменной isFavourite. Для этого используется виджет Conditional Builder, который показывает разные ветки вёрстки по условию If/Else If/Else, — так пользователь видит, добавлен ли товар в избранное.

Порядок действий:

Действие Update Component State

Значение состояния меняется только действиями. Добавьте Update Component State в редакторе действий компонента.

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

Перерисовка при обновлении

В настройках действия есть свойство Update Type:

• Rebuild Containing Page — перерисовать страницу, на которой стоит компонент.

• Rebuild Current Component — перерисовать только сам компонент.

• No Rebuild — обновить значение, не трогая интерфейс.