Слияние кода завершено, страница обновится автоматически
Эта статья является эксклюзивной публикацией сообщества Tuishe Juejin и запрещена для перепечатки в течение 14 дней, а после этого срока требует специального разрешения. Нарушение авторских прав будет преследоваться!
Это пятая часть серии "Фреймворк выбора для интеграции Flutter". Как было заявлено ранее, эта серия предназначена для быстрого выбора подходящих функциональных модулей для создания Flutter проекта или сборки его стартовой платформы. Это руководство, поэтому особенно полезно для новичков.
Это одно из немногих руководств по поддержке add-to-app в Flutter.
Изначально планировалось не затрагивать эту тему, так как смешанное развитие с использованием add-to-app всегда было проблемой для Flutter, но в настоящее время это непредотвратимый сценарий. Иногда даже возникают такие "странные" требования, как встраивание Flutter UI в RN. Поэтому, если все имеют такие потребности, давайте обсудим варианты таких проектов.
 |
 |
|---|
add-to-app считается особенным в контексте Flutter? Потому что компоненты управления Flutter и маршруты отрисовываются через независимый FlutterEngine, который управляет отдельным механизмом рендеринга UI и стеком страниц для Flutter.Другими словами, Flutter представляет собой "одностраничное" приложение относительно платформы, используя пример, часто приводимый ранее:FlutterA и FlutterB;Activity / ViewController, запускается native page X, которое добавляется в стек маршрутов native слоя, закрывая тем самым FlutterActivity / FlutterViewController. Таким образом, FlutterA и FlutterB также скрываются;FlutterC, он будет скрыт за счет native page X;
Таким образом, можно понять, что по умолчанию Flutter работает как "одностраничное" приложение, и его стек маршрутов несовместим с native слоем. Другие проблемы, такие как совместное использование данных памяти и встраивание UI-компонентов, являются болевыми точками add-to-app.
Официальная документация предлагает два способа интеграции для Android и три для iOS.
Android: локальный aar + удаленный aar — этот метод позволяет Android-разработчикам работать без установки Flutter SDK.
iOS: [генерация xcframework] — этот метод позволяет iOS-разработчикам работать без установки Flutter SDK.
Хотя эти способы имеют недостаток в необходимости отдельной отладки, с точки зрения проектной耦合和协调开发，我认为这将更加符合需求。
Хотя эти способы имеют недостаток в необходимости отдельной отладки, с точки зрения проектной耦合和协调开发，我认为这将更加符合需求。
Хотя эти способы имеют недостаток в необходимости отдельной отладки, с точки зрения проектной耦合和协调开发, я считаю, что это будет более соответствовать требованиям.Кроме того, если у вас остаются вопросы относительно использования add-to-app, то официальный проект put-flutter-to-work может послужить хорошим примером для изучения.
Если ваш add-to-app не работает, рекомендуется обратиться к этому Demo как лучшему варианту, например, конфигурация зависимостей и предварительная загрузка движка через
FlutterEngineCacheиexecuteDartEntrypoint.
Это ключевой раздел статьи, где можно предвидеть, что гибридные маршруты и совместное использование данных будут самыми большими проблемами при работе с add-to-app, например:
В процессе этого следует обеспечивать согласованность гибридных маршрутов и бесперебойное взаимодействие данных. Поэтому, на этом этапе, "открытие нескольких flutter страниц одновременно" становится необходимым требованием, но его реализация имеет различные подходы:
Каждый из этих подходов имеет свои преимущества и недостатки, и именно они являются предметом рассмотрения данной статьи.
Для некоторых разработчиков FlutterEngineGroup может быть мало знакомым, это решение было представлено вместе с версией Flutter 2.0 как официальное решение для add-to-app. Решение FlutterEngineGroup использует несколько движков для поддержки гибридов, и официально заявлено, что каждое последующее использование движка после первого занимает всего 180КБ памяти на Android и iOS.
В предыдущих решениях каждый дополнительный Engine мог увеличивать использование памяти на 19МБ для Android и 13МБ для iOS.
После использования FlutterEngineGroup, все FlutterEngine создаются с помощью FlutterEngineGroup. Созданные FlutterEngine могут независимо использоваться в FlutterActivity/FlutterViewController, FlutterFragment и FlutterView.На самом деле, FlutterEngineGroup не обязательно используется для смешивания маршрутов. Как показано на следующем анимированном изображении, в примере официального проекта multiple_flutters также реализован случай, когда два FlutterFragment находятся внутри одного экрана. Основной идеей является то, что FlutterEngineGroup позволяет поддерживать минимальное потребление памяти при работе с несколькими engines.| 
| 
|
| ------------------------------------------------------- | ------------------------------------------------------------- |
Причина того, почему FlutterEngineGroup обеспечивает минимальное потребление памяти при работе с несколькими Engines, заключается в том, что FlutterEngine, созданные через FlutterEngineGroup, могут использовать общие контексты GPU, метрики шрифтов и изоляционные группы снимков. То есть новый Engine может быть создан через старый Engine методом spawn.
Внутри FlutterEngineGroup основное управление осуществляется через dartEntrypoint:
findAppBundlePath по умолчанию указывает на директорию flutter_assets;entrypoint фактически представляет собой имя метода запуска в Dart-коде; это значит, что он связан с методом runApp в Dart, который можно указать через @pragma('vm:entry-point');MethodChannel
 |
|---|
 |
 |
После внедрения FlutterEngineGroup:
MethodChannel;FlutterEngine;FlutterView на уровне нативного кода;Конечно, вы уже заметили, что поскольку каждый Flutter экран представляет собой отдельный Engine, благодаря концепции дизайна Dart-isolate, память каждого отдельного Engine не может быть совместно использована. Значит, когда вам требуется делиться данными, вы должны хранить данные на уровне нативной реализации, а затем внедрять или передавать их в каждый Flutter-компонент, как это указано в официальной документации: каждый Flutter-компонент больше похож на отдельный модуль Flutter.> Конечно, это также приводит к некоторым неудобствам, таким как: одинаковое изображение может несколько раз загружаться в нативной реализации и различных Flutter Engines, что требует использования внешних текстур для управления памятью на уровне нативной реализации.А вот преимущества FlutterEngineGroup очевидны: он поддерживается официально, не требует сторонних библиотек и является легковесным решением.
На самом деле, FlutterEngineGroup полезен не только при работе с несколькими страницами, но даже если у вас всего один Engine, его можно использовать, например, при создании Flutter Engine внутри сервиса и построении независимого FlutterView. Однако, после того как страница остается бездейственной около 20 минут, могут возникнуть следующие проблемы:
E/MessageQueue-JNI: java.lang.RuntimeException: Невозможно выполнить операцию, так как FlutterJNI не связан с нативной средой.
Используя FlutterEngineGroup, вы заметите значительное улучшение ситуации с повторным созданием и сборкой Engine.
Почему здесь подробно рассматривается
FlutterEngineGroup: потому что он играет важную роль в последующих решениях.
В контексте добавления Flutter в существующее приложение, flutter_boost должно быть знакомо многим. Этот ранний открытый проект поддерживает маршрутизацию в смешанном режиме, используя один Engine для совместного использования данных на уровне Dart.Эта модель имеет явные преимущества: совместное использование состояния данных на уровне Dart, поскольку используется всего один Engine. Однако существуют и недостатки, как показано на следующей схеме процесса рендера flutter_boost версии 2.0, где поддержка одного Engine для рендера нескольких Surface не была официально рекомендована, что замедлило развитие проекта.
Однако flutter_boost был основным выбором для early adopters, но если вы хотите использовать flutter_boost сейчас, лучше всего начать с версии Flutter SDK 3.0.
Дело в том, что до версии 3.0 flutter_boost самостоятельно копировал и поддерживал собственные изменения уровня Embedding Engine, что замедляло обновление и увеличивало вторжение. А с версии 3.0 flutter_boost расширяется через наследование, обеспечивая лучшую совместимость в будущем. Хотя flutter_boost также заявляет, что версия flutter_boost 3.0 будет совместима с Flutter 2.0, вы должны это понимать.
На основе текущей версии flutter_boost 3.0 основные преимущества новых версий следующие:
В сравнении с flutter_boost 2.0 API для Android и iOS были выровнаны, жизненный цикл был унифицирован, а после оптимизации код стал более читаемым;
Нет вторжения в код Engine, обеспечивая совместимость со множеством версий Flutter и избегая проблем, связанных с невозможностью обновления Flutter SDK из-за flutter_boost;
Поддержка активна и продолжается.Конечно, если сравнивать с FlutterEngineGroup, то преимущества flutter_boost заключаются в следующем:
Поддержка передачи данных между страницами;
Унифицированный интерфейс вызова смешанных маршрутов;
Поддержка общего доступа данных на уровне Dart;
Поддержка передачи событий между платформами.
А недостатки могут быть такими:
Как видно, поддерживать дополнительную логику вне механизма Flutter сложно, особенно сложно это делать, когда flutter_boost всё ещё активно развивается и поддерживается. На данный момент можно сказать, что flutter_boost 3.0 является хорошим выбором.
Проект flutter_thrio был открыт компанией Hellobike как решение для интеграции "add-to-app". После прекращения поддержки Hellobike проект был взят на себя сообществом flutter_thrio для дальнейшего развития и поддержки.flutter_thrio использует модель множественного Engine, одновременно поддерживая переиспользование Engine. Исходя из текущего состояния кода (bf16529), его работа сводится к тому, что:> Все операции с маршрутами поддерживаются через нативный код, а один ThrioFlutterActivity / FlutterViewController может содержать несколько Dart страниц. Если последняя страница не является контейнером Flutter, новый FlutterEngine создается методом spawn и строится новая страница с контейнером Flutter.
Внутреннее выполнение flutter_thrio с использованием нескольких Engine аналогично подходу FlutterEngineGroup. Однако он использует рефлексию для получения flutterJNI из FlutterEngine, а затем создает новый FlutterEngine методом spawn.
PS, в текущей версии flutter_thrio метка
isMultiEngineEnabledможет вызывать путаницу, так как она больше контролируетentrypoint, который используется для принятия решения о запуске нового контейнераFlutterEngine.
Кроме того, flutter_thrio использует упаковку, чтобы обеспечить единый notify интерфейс для синхронизации данных через страницы на всех трёх платформах. Это также является обычной реализацией связи данных в add-to-app.
Какие преимущества имеет flutter_thrio?
FlutterEngine по требованиюКакие недостатки имеет эта библиотека?- Несоответствие требованиям Fragment
present, доступной в iOSМикс_Стэк — это личная открытая библиотека для смешанной маршрутизации, которая по дизайну напоминает раннюю версию легковесного Boost, использующую одиночный режим Engine. Поэтому она реализует смешанную маршрутизацию путём переключения поверхности при переходе между Flutter контейнерами.
В микс_стэк каждый Native Flutter Container содержит независимый Navigator для управления внутренними стеками Flutter, управление которыми осуществляется через внутренние стеки Flutter для контроля над текущими Native Container.
Особенностью микс_стэк является поддержка нескольких вкладок Flutter View и управления скрытием и показом Native интерфейса с Flutter конца, одним из самых интересных аспектов является NativeOverlayReplacer.Например, как показано на следующем рисунке, на FlutterView находятся два native компонента — navigationBar и tabBar. При попытке вывода нового маршрута Flutter эти native компоненты будут его затенять. Однако, поскольку требуется эффект Hero, мы не хотим использовать новые native контейнеры для этого. В этом случае можно использовать NativeOverlayReplacer.| 
| 
|
| ------------------------------------------------------------ | ------------------------------------------- |Как показано на правой стороне анимации выше, в странице можно указать autoHidesOverlayNames с помощью NativeOverlayReplacer, а затем вызвать registerAutoPushHiding перед открытием маршрута Flutter popup. В результате это позволяет достичь эффекта, когда компоненты Flutter отображаются поверх нативных.
NativeOverlayReplacer(
autoHidesOverlayNames: ["tabBar", "navigationBar"],
...
NativeOverlayReplacer.of(context).registerAutoPushHiding()
Основной принцип заключается в том, что при открытии страницы через нативный слой используется метод createBitmap для создания скриншотов двух нативных компонентов, после чего байтовое представление (toByteArray) этих скриншотов передается в Flutter. Когда компоненты Flutter отображаются, нативные компоненты скрываются, и с использованием Stack рисуются битмапы нативных компонентов на нужных позициях, обеспечивая таким образом эффект, как будто компоненты Flutter отрисованы поверх нативных.
Преимущества использования mix_stack:
NativeOverlayReplacer
Недостатки mix_stack также очевидны:
mix_stack имеет более высокую вторгаемость, особенно на платформе Android, где он использует рефлексию для получения доступа к различным внутренним переменным и методам FlutterEngine, FlutterTextureView и embedding.debugImplementation 'com.squareup.leakcanary:leakcanary-android:2.4' в директории android/app.fusion использует подход FlutterEngineGroup. По умолчанию при множественных переходах между Flutter и нативными страницами приложение всегда будет иметь один экземпляр FlutterEngine, то есть соответствует режиму REUSE_MODE в fusion.
Конечно, для случаев, таких как
FusionFragmentиDialog, fusion предлагает возможность не использовать повторное использование, позволяя создавать независимыйFlutterEngineс минимальными затратами.
Если рассмотреть код, то код fusion значительно проще. Например, основные действия, выполняемые FusionActivity после наследования от FlutterActivity: - Найти текущий FlutterView в активности и вызвать метод detachFromFlutterEngine, чтобы отключить его.
onResume вызвать engine.activityControlSurface.attachToActivity и flutterView?.attachToFlutterEngine, чтобы восстановить использование движка.Основной идеей дизайна Fusion является максимально простое объединение соответствующих логик, поэтому вторжение минимальное, а также используется уже существующая логика embedding, если это возможно. По данным демонстрационных примеров, проблем с использованием памяти пока нет.
Преимущества Fusion заключаются в том, что автор уделяет большое внимание деталям:- Возможность неправильного отображения цвета значков состояния при переходах между контейнерами Flutter и Native;
Конечно, у Fusion есть и недостатки:
PS: Если демо не запускается, попробуйте изменить
compileSdkVersionна 32 и установите всеext.kotlin_versionна'1.7.10'.
После вышеописанного обзора текущего состояния и поддержки различных решений для интеграции Flutter, надеюсь, вы получили представление о возможных подходах. Выбор конкретного решения зависит от ваших потребностей. Каждый из этих подходов имеет свои слабости и ограничения, но главное — это будущее развитие и поддержка этих решений.Здесь стоит отметить, что открытый исходный код больше всего ценен тем, что он предлагает решение проблемы, эффективное взаимодействие и внесение предложений могут способствовать здоровому развитию проекта. Если сообщество состоит только из запросов на исправление ошибок, то проект будет сложно поддерживать долго. Поэтому важно, что предлагаемое решение действительно полезно, а не то, что проект является частью KPI. Это то, что я считаю наиболее важным в рамках открытого исходного кода.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )