截止到现在,我们的混合栈Group方案已经在线上跑了一年半时间了,一直也没有出现什么问题,最近有时间将之前整理的项目搭建方案做一下整理,记录出来,希望帮助到有需要帮助的人
我们的项目经历了Flutter_boost单引擎模式向多引擎模式转变的过程,踩坑无数,终于形成了现在的项目架构
以下着重介绍项目结构及搭建过程:
一、项目架构
以下为 app 混合栈整体架构图
1、通过 FlutterEngineGroup 开启多引擎模式,每次 Native 进入Flutter页面,都将初始化一个Engine,通过 Engine 注册 Channel,使用Channel 注入方式,将路由和参数注入到 Flutter 侧。
2、Flutter端监听Channel,获取路由名和参数。通过路由名和参数实现页面跳转。
二、混合开发如何工作的。
以 iOS 为例:
1、通过 Cocoapods 引入Flutter项目的xcframework。其中xcframework的目录结构包含有:
- 引擎和Flutter环境
- 在 native 侧 引入 Flutter
1、在 AppDelegate 中初始化 FlutterEngineGroup,或者在 AppDelegate 初始化一个 Flutter 管理的单例,通过单例可以访问 引擎
2、如果需要打开一个 Flutter 页面,可通过直接调用
内部实现原理:这是内部实现原理、Android应该同理。
在 AspirinFlutterRouter 中定义了打开方式:
如图: 通过FlutterEngineGroup创建一个引擎,打开一个FlutterViewController页面
将引擎传入到页面中。
通过 引擎 初始化 Channel.
tip: Channel 是 Native 和 Flutter 的通讯桥梁。通过 Channel 注入,Flutter 端发起监听,可实现 Native 向 Flutter 端传递参数和配置项。
通过监听 Channel 的回调,可以实现 Flutter 向 Native 传递参数。
这样原生端的 流程 就 走完了,接下来就是 Flutter 侧的工作了。
Flutter 起监听的原理:
在 main.dart 文件中,起监听 Channel 服务:
拿到 路由跳转 和 传递过来的参数,就能够实现 Flutter测页面的加载:
三、混合栈开发中遇到的一些问题
1、Engine 资源共享, flutterEngineGroup的isolate内存不共享,每开一个页面都需要重新注册一遍plugin,这样带来的问题是进入flutter页面会出现一会空白
通过加一个 loading,或者闪屏页进行过渡。
2、与Native的数据传递方式
数据传递全部通过 MethodChannel
3、pop到指定页面的问题,将会非常复杂
通过发送 MethodChannel,原生端接收到 Channel, 跳转到对应的页面。
项目结构如上
可能会出现如下情况:
4、应用生命周期监听、返回取消动画。
通过在Flutter侧设置NavigatorObserver的监听,可以解决ViewWillAppear和ViewWillDisappear的问题。