Flutter混合栈记录

574 阅读3分钟

截止到现在,我们的混合栈Group方案已经在线上跑了一年半时间了,一直也没有出现什么问题,最近有时间将之前整理的项目搭建方案做一下整理,记录出来,希望帮助到有需要帮助的人

我们的项目经历了Flutter_boost单引擎模式向多引擎模式转变的过程,踩坑无数,终于形成了现在的项目架构

以下着重介绍项目结构及搭建过程:

一、项目架构

以下为 app 混合栈整体架构图

image2021-11-17_19-10-22.png

Flutter 2.0.0 大幅减少了额外的 Flutter 引擎的内存占用,从 Android 上 约 19MB,iOS 上 约 13MB,降至 约 180kB。将固定成本减少了约 99% 后,您可以更自由地将多个 Flutter 集成至您的应用。

1、通过 FlutterEngineGroup 开启多引擎模式,每次 Native 进入Flutter页面,都将初始化一个Engine,通过 Engine 注册 Channel,使用Channel 注入方式,将路由和参数注入到 Flutter 侧。

2、Flutter端监听Channel,获取路由名和参数。通过路由名和参数实现页面跳转。

二、混合开发如何工作的。

以 iOS 为例:

1、通过 Cocoapods 引入Flutter项目的xcframework。其中xcframework的目录结构包含有:

  • 引擎和Flutter环境

image2021-11-18_18-33-10.png

  • 在 native 侧 引入 Flutter

 1、在 AppDelegate 中初始化 FlutterEngineGroup,或者在 AppDelegate 初始化一个 Flutter 管理的单例,通过单例可以访问 引擎

image2021-11-18_18-40-33.png

2、如果需要打开一个 Flutter 页面,可通过直接调用

image2021-11-18_18-42-54.png

内部实现原理:这是内部实现原理、Android应该同理。

在 AspirinFlutterRouter 中定义了打开方式:

如图: 通过FlutterEngineGroup创建一个引擎,打开一个FlutterViewController页面

image2021-11-18_18-44-13.png

将引擎传入到页面中。

image2021-11-18_18-48-13.png

通过 引擎 初始化 Channel.

image2021-11-18_18-53-36.png

tip: Channel 是 Native 和 Flutter 的通讯桥梁。通过 Channel 注入,Flutter 端发起监听,可实现 Native 向 Flutter 端传递参数和配置项。

通过监听 Channel 的回调,可以实现 Flutter 向 Native 传递参数。

image2021-11-18_18-55-19.png

这样原生端的 流程 就 走完了,接下来就是 Flutter 侧的工作了。

Flutter 起监听的原理:

在 main.dart 文件中,起监听 Channel 服务:

image2021-11-18_18-59-18.png

拿到 路由跳转 和 传递过来的参数,就能够实现 Flutter测页面的加载:

image2021-11-18_19-0-33.png

三、混合栈开发中遇到的一些问题

1、Engine 资源共享, flutterEngineGroup的isolate内存不共享,每开一个页面都需要重新注册一遍plugin,这样带来的问题是进入flutter页面会出现一会空白

通过加一个 loading,或者闪屏页进行过渡。

2、与Native的数据传递方式

数据传递全部通过 MethodChannel

3、pop到指定页面的问题,将会非常复杂

通过发送 MethodChannel,原生端接收到 Channel, 跳转到对应的页面。

image2021-11-19_17-6-50.png

 项目结构如上

可能会出现如下情况:

image2021-11-19_17-8-16.png

4、应用生命周期监听、返回取消动画。

通过在Flutter侧设置NavigatorObserver的监听,可以解决ViewWillAppear和ViewWillDisappear的问题。