Управление состоянием в FlutterFlow
Этот документ объясняет сгенерированный код, лежащий в основе подходов к управлению состоянием, используемых в FlutterFlow. Если вы ищете руководство по добавлению переменных состояния в FlutterFlow, обратитесь к документации Переменные состояния.
FlutterFlow управляет состоянием несколькими способами в зависимости от области действия.
В целом управление состоянием осуществляется с помощью пакета Provider, который упрощает предоставление моделей данных для компонентов, страниц и общего состояния приложения.
Модели страниц и компонентов
В FlutterFlow модели виджетов компонентов и модели страниц имеют единообразную структуру, что повышает согласованность во всей платформе. Они включают локальные поля состояния для хранения данных, специфичных для компонента, таких как размеры или ввод пользователя. Эти модели также оснащены методами инициализации и очистки: initState для настройки при инициализации виджета и dispose для очистки ресурсов, когда виджет больше не нужен.
Кроме того, они предоставляют место для блоков действий, которые представляют собой набор действий, выполняющих конкретную задачу и которые можно повторно использовать в разных частях приложения, а также вспомогательных методов для дополнительных функций, необходимых компоненту. Эта согласованная структура моделей помогает эффективно управлять состоянием и взаимодействиями различных компонентов в приложении.
Состояние страницы
Переменные, используемые исключительно в пределах страницы — например, валидатор текстового поля или значение флажка, — хранятся в Model каждой страницы. Эти переменные могут быть доступны другим дочерним компонентам на той же странице. Например, на странице с формой нажатие кнопки в одном компоненте может потребовать доступа к значению текстового поля в другом компоненте.
Переменные в пределах страницы отслеживаются через StatefulWidget и инкапсулируются в модель этой страницы.
Состояние компонента
Аналогично состоянию страницы переменные состояния компонента доступны в пределах компонента, в котором они определены. Каждый компонент имеет соответствующие классы Model и Widget. Переменные могут передаваться из родителя в качестве параметров. Кроме того, вы можете обращаться к значениям состояния компонента из родительского виджета страницы.
Эта доступность возможна благодаря тому, что модель компонента инстанцируется в модели родительской страницы. Она использует метод Provider context.read(), который возвращает любую существующую модель в дереве перед созданием новой. Таким образом, любые обновления состояния в модели компонента отразятся в экземпляре этой модели компонента у родителя.
Один из вспомогательных методов в flutter_flow_model.dart — это wrapWithModel(). Этот метод оборачивает дочерний элемент в модель Provider, чтобы сделать её доступной для дочернего элемента, и устанавливает функцию обратного вызова, которая обычно используется для вызова setState() на родительской странице и обновления любых изменённых значений. Мы используем этот обёртку вокруг виджетов, которым нужно обращаться к данным, включённым в модель.
Например, если страница включает компонент с текстов ым полем, а позже на странице есть кнопка, которой требуется доступ к значению этого текстового поля, кнопка будет обернута в wrapWithModel(), включая модель компонента текстового поля в качестве параметра.
Важно отметить, что компоненты не могут напрямую обращаться к переменным других компонентов на той же странице. Однако вы можете передать переменную из ComponentA в качестве параметра в ComponentB в их родительской странице. Это гарантирует, что ComponentB получит все обновления от ComponentA, как ожидается.
Состояние приложения
Сгенерированный код за классом App State в FlutterFlow объясняется в документации FFAppState.
Переменные
Переменные, необходимые на нескольких страницах приложения, такие как имя пользователя, должны добавляться в состояние приложения. Обратитесь к lib/app_state.dart.
Все определённые переменные в состоянии приложения являются компонентами класса FFAppState, который функционирует как ChangeNotifier. Это означает, что слушатели могут подписываться и получать уведомления при любых изменениях.
На каждой странице, которой требуется доступ к переменным состояния приложения, вызывается метод context.watch<AppState>() для инициализации слушателя для этой страницы. Этот метод watch(), предоставляемый пакетом Provider, упрощает доступ к унаследованным виджетам и служит эффективной обёрткой.
Сохранение состояния приложения
При создании переменной состояния приложения выбор опции «Persisted» позволяет FlutterFlow сохранять её на устройстве с помощью пакета Shared Preferences. Это гарантирует, что переменная останется доступной даже после перезапуска приложения, что идеально подходит для сохранения настроек, таких как статус входа в систему или выбор пользователя между светлым и тёмным режимами.
Если опция «Secure Persisted Fields» включена в настройках состояния приложения, FlutterFlow использует пакет Flutter Secure Storage для шифрования данных.
Если платформа — Android, то flutter_secure_storage хранит данные в encryptedSharedPreference, которые представляют собой общие предпочтения, шифрующие ключи и значения. Он обрабатывает шифрование AES для генерации секретного ключа, зашифрованного с помощью RSA, и хранимого в KeyStore.
Для платформы iOS используется KeyChain, который является специфичным для iOS безопасным хранилищем, используемым для хранения и доступа к криптографическим ключам только в вашем приложении.
В случае веб используется API Web Cryptography (Web Crypto).
Глобальное состояние
Переменные глобального состояния — это фрагменты информации, связанные с устройством, доступные во всём приложении FlutterFlow.
Они включают:
- Размер экрана
- Платформу (мобильная, веб, Android, iOS)
- Видимость клавиатуры
- Текущее время
Эти переменные находятся в разделе «Global Properties» и автоматически добавляются FlutterFlow, а не генерируются пользователями. Пользователи могут использовать переменные App State для своих собственных глобальных сценариев.
Глобальные свойства извлекаются с помощью методов, определённых в flutter_flow_utils.dart. Обычно эти методы используют встроенные библиотеки Flutter, такие как dart:io, для сбора необходимой информации.
Константы
Для значений, которые не изменяются в течение всего приложения, таких как ключи API или флаги среды, мы используем класс FFAppConstants, который можно найти в lib/app_constants.dart. Это абстрактный класс, то есть его нельзя напрямую инстанцировать. Вместо этого он служит пространством имён для статических констант, позволяя организовывать и последовательно обращаться к этим значениям по всему приложению.