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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

важно

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

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

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

Клавиатурные комбинации и Поля текста

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

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

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

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

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

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

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

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

Например,

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

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

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

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

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

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

• Is List: Это свойство определяет, может ли переменная хранить несколько значений одного типа данных (например, список или массив) или только одно значение.
• Initial Field Value: Это свойство задает значение по умолчанию для переменной при ее первом создании. Это как установка стартовой точки или значения, с которого начинается переменная, до того, как что-либо еще происходит.
• Nullable: Это свойство определяет, может ли переменная иметь значение null. Когда "Nullable" установлено на true, это означает, что переменная может быть пустой или иметь значение null. Это полезно при работе с необязательными данными или ситуациях, когда отсутств