Flutter混合栈管理

林军华

已于 2022-08-26 17:51:16 修改

阅读量1.8k

点赞数

分类专栏： flutter 文章标签： flutter android ios flutter混合栈管理

于 2022-08-26 17:45:28 首次发布

本文链接：https://blog.youkuaiyun.com/u013038616/article/details/126547880

版权

由于Flutter框架出色的UI渲染能力，多平台一致性，大大的提高了研发效率，降低了人力成本。越来越多的厂商开始接入Flutter，但是很多厂商都是成熟的App，完全从头使用Flutter开发应用不现实，采用混合开发则是一种非常好的切入方式。

那混合栈管理则是一个避免不了的话题。

本文从0到1的角度阐释Flutter混合栈实现思路，介绍关键技术点而忽略部分细节，让大家从全局认识Flutter混合栈管理。

常见的几种flutter页面与原生页面混合的情况如下：

在这里插入图片描述

对于1，2两种情况比较简单，可以抽象成两个比较标准的栈结构，如下图：

在这里插入图片描述

对于Android侧：页面栈结构无需做任何改变，直接复用原生页面栈管理即可。
对于Flutter侧：页面栈结构可以由Navigator实现，也是可以直接使用现有的栈管理即可。

关键点：

对于情况3，多个Flutter页面同级可以分为两种情况：
在这里插入图片描述

由于一个FlutterEngine同一时刻只能渲染一块画布FlutterView，故如果需要显示这种页面结构，则必须使用多引擎。

如富途牛牛Pad的情况，FlutterPage1所在主屏需要一个独立的引擎渲染，FlutterPage2所在副屏使用一个独立引擎并关联其上的其他页面栈，则可以转换为标准的栈结构情况。

在这里插入图片描述

由于页面不会同时出现，这样的情况可以使用单引擎来实现，可以减少不必要的内存开销，也可以避开多引擎内存无法共享的问题。

由于有多个同级的FlutterPage页面，flutter侧不能简单的使用Navigator线行栈结构实现。

对于这种情况更好的做法是：抛弃强耦合的线性栈结构，用key-value的形式映射Flutter页面与原生页面，哪个原生页面在前台则渲染其对应的FlutterPage即可。

关键点：

对于复合情况，这里只考虑Flutter页面交替出现的场景，对于同时显示的页面需要使用到多引擎，页面管理更复杂，本次暂不考虑。

在这里插入图片描述

这种复合情况可以看组1，2，3种情况的结合体，将上述两小节的关键点合考虑即可。

综合上述关键点，得出我们需要的栈管理结构需要支持一下的关键点：

内存优化与共享：使用单引擎，需要解决在页面交替出现时单引擎如何渲染不同页面
连续多个Flutter页面：使用单个原生容器承载，内部可以使用Navigator管理多个Flutter页面
不连续的Flutter页面：一个Flutter页面一个原生页面（Fragment/Activity），栈结构由原生维护，原生页面与Flutter页面实现k-v映射关系（可以由Overlay实现）。

整个栈结构可以抽象成如下结构图：

在这里插入图片描述