Жизненный цикл страницы

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

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

• Инициализация: Это первая фаза, на которой настраивается страница. Здесь загружаются начальные данные. Это может включать настройку необходимого состояния или значений по умолчанию для страницы.
• Отрисовка: Здесь страница фактически отображается на экране. Это включает настройку макета, стилей и любых интерактивных элементов. Теперь пользователь может увидеть страницу в её начальном состоянии.
• Обновление: После отрисовки страница становится интерактивной и может реагировать на ввод пользователя, такой как клики, ввод текста или другие жесты. Она может перерисовывать части страницы или всю страницу целиком, чтобы отразить изменения из-за взаимодействия или новых данных.
• Удаление: Когда страница больше не нужна или пользователь переходит на другую, запускается эта фаза. Здесь ресурсы, связанные со страницей, освобождаются из памяти и становятся недоступными.

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

Триггеры действий на уровне страницы

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

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

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

При открытии редактора потоков действий для вашей страницы вы увидите следующие триггеры действий, доступные для страницы.

При загрузке страницы [триггер действия]

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

Возможные сценарии использования

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

• Настройка состояния: Если ваша страница зависит от определённых условий состояния (например, переключателей, выборов или полей ввода), вы можете установить эти состояния соответствующим образом при загрузке страницы.

• Запуск анимаций: Запустите анимации, которые приветствуют пользователей или привлекают внимание к определённым элементам интерфейса на странице.

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

Сгенерированный код

При добавлении действий к триггеру При загрузке страницы они выполняются в методе SchedulerBinding.instance.addPostFrameCallback((_). Это гарантирует, что действия запустятся после полной сборки дерева виджетов. Подробности см. в документе Страница: сгенерированный код.

При встряхивании телефона [триггер действия]

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

Возможные сценарии использования

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

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

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

Возможные сценарии использования

• Создание новых задач в приложениях для управления проектами: В приложениях для управления проектами, таких как Linear, пользователи могут нажать C, чтобы быстро открыть форму для создания новой задачи.
• Отправка формы: Пользователи могут нажать комбинацию клавиш (например, Ctrl + Enter), чтобы отправить форму.
• Навигация между страницами: Используйте сочетания клавиш, такие как Ctrl + Right Arrow, для навигации между страницами без использования мыши.

Важно

• Когда сочетание клавиш создаётся на уровне страницы, оно не сработает, если поле ввода TextField в фокусе, и вы также не сможете ввести клавишу сочетания в TextField.
• Когда сочетание клавиш создаётся на уровне компонента, оно также не сработает, если TextField в фокусе, но вы всё равно сможете ввести клавишу сочетания в TextField.
• Чтобы избежать конфликтов, рекомендуется использовать сочетания клавиш, которые пользователи вряд ли наберут, такие как Command + S, вместо одиночной клавиши вроде 'S'.
• В настоящее время известна проблема с функциональностью автофокуса во Flutter. Если TextField внутри компонента имеет включённый автофокус, а у компонента есть сочетание клавиш, TextField не получит фокус как ожидалось.

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

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

Сочетания клавиш и поля ввода

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

Например, если у вас есть сочетание, назначенное на букву "C", и пользователь пытается ввести "C" в поле ввода, вы, вероятно, хотите, чтобы ввод захватывал нажатие клавиши без срабатывания сочетания.

Чтобы обработать это, вы можете включить опцию на виджете TextField, чтобы обходить сочетания клавиш. Однако в целом лучше назначать более уникальные комбинации, такие как Cmd + C, которые менее вероятно конфликтуют с обычным набором текста в поле ввода.

При удалении [триггер действия]

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

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

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

Возможные сценарии использования

• Очистка ресурсов: Используйте этот триггер действия, чтобы отменить таймеры, закрыть соединения с базой данных или отписаться от потоков, предотвращая утечки памяти и ненужную обработку.
  • Например, приложения реального времени, такие как платформы для торговли акциями, полагаются на соединения WebSocket для получения живых обновлений. Домашняя страница, отображающая живой тикер цен акций, потребует открытия соединения WebSocket при загрузке страницы и закрытия его при удалении. Без триггера При удалении соединение WebSocket может оставаться открытым ненужно, что приведёт к потере ресурсов и нестабильности приложения.
• Завершение транзакций в базе данных: Зафиксируйте или откатите транзакции в базе данных, если пользователь покидает страницу до завершения процесса.
• Журналирование или аналитика: Отслеживайте поведение пользователей или регистрируйте события (например, выход со страницы или время, проведённое на странице), чтобы мониторить вовлечённость пользователей и улучшать опыт использования приложения.

Состояние страницы

Переменные состояния

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

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

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

Например,

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

Это позволяет сохранять состояние страницы по мере взаимодействия пользователя с разными виджетами и компонентами.

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

Создание состояния страницы

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

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

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

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

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

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

• Поскольку searchString используется для хранения одного запроса поиска, введённого пользователем в строке поиска, "Список" установлено в false, поэтому она может содержать только одно значение за раз.

• Значение по умолчанию для searchString установлено в пустую строку (""). Это гарантирует, что при загрузке домашней страницы строка поиска изначально пуста, позволяя пользователям ввести свой запрос поиска.

• Поскольку ввод запроса поиска необязателен и строка поиска может остаться пустой, "Nullable" установлено в true. Это позволяет переменной searchString быть null, пока пользователь не введёт запрос поиска, указывая, что поиск ещё не выполнен.

примечание

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

Получение значения состояния страницы

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

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

Обновление состояния страницы [действие]

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

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

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

Перестроить текущую страницу: Эта опция запускает перерисовку страницы, гарантируя, что любые изменения состояния отразятся в пользовательском интерфейсе (UI).

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

подсказка

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

Дорогие перестройки

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

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