Flutter混编实践

一、跨平台技术的出现背景

1. 原生开发

Android基于Java或者Kotlin， iOS基于Objective-C或Swift，直接调用各自平台的SDK开发的应用程序；

优点：能快速访问各种硬件功能（GPS、摄像头）速度快、性能高、可以实现复杂动画及绘制，整体用户体验好
缺点: 开发成本高，一个应用要维护两套代码，一致性差

为了加快产品的开发周期，提高开发效率，保持多端的一致性，逐渐出现了多种跨平台技术，下面选取一些常用技术作为对比:

2. H5+原生混合开发

H5技术在各类app中使用的频率非常高，通过原生的网页加载控件WebView (Android)或WKWebView（iOS）来加载H5页面，而WebView实质上就是一个浏览器内核，其JavaScript依然运行在一个权限受限的沙箱中，所以对于大多数系统能力都没有访问权限，如无法访问文件系统、不能使用蓝牙等。所以我们通常要使用JsBridge来进行两端的通信，虽然web技术栈社区及资源丰富，但是性能不够好，对于复杂用户界面或动画，容易出现卡顿和掉帧。

3. React Native

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和Android两个平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用。

4. Weex

Weex是阿里巴巴于2016年发布的跨平台移动端开发框架，思想及原理和React Native类似，最大的不同是语法层面，Weex支持Vue语法和Rax语法，Rax 的 DSL(Domain Specific Language) 语法是基于 React JSX 语法而创造。与 React 不同，在 Rax 中 JSX 是必选的，它不支持通过其它方式创建组件，所以学习 JSX 是使用 Rax 的必要基础。而React Native只支持JSX语法。

二、Flutter的优势

Flutter和以上几种跨平台技术最大的不同是其自行实现一套渲染框架，可通过调用skia等方式完成自渲染，而不依赖于原生控件，也不用依赖于webview，使用的语言也从JavaScript变成了Dart。

1. 自绘引擎Skia

Flutter使用Skia作为其2D渲染引擎，Skia是Google的一个2D图形处理函数库，包含字型、坐标转换，以及点阵图都有高效能且简洁的表现，Skia是跨平台的，并提供了非常友好的API，目前Google Chrome浏览器和Android均采用Skia作为其绘图引擎。

2. Dart语言

Flutter使用Dart而不是JavaScript作为开发语言，主要有如下考虑：

基于JIT的快速开发周期：Flutter在开发阶段采用，采用JIT模式，这样就避免了每次改动都要进行编译，极大的节省了开发时间；
基于AOT的发布包: Flutter在发布时可以通过AOT生成高效的ARM代码以保证应用性能。而JavaScript则不具有这个能力。

3. 总结：

技术类型	UI渲染方式	性能	开发效率	动态化	框架代表
H5	WebView 渲染	一般	高	支持	Cordova、Ionic
JavaScript+原生渲染	好	中	中	支持	RN、Weex
Flutter	好	高	高	不支持	Flutter

三、Flutter框架结构

Flutter架构

Flutter 架构采用分层设计，从下到上分为三层，依次为：Embedder、Engine、Framework。

1. Embedder

操作系统适配层，实现了渲染 Surface 设置，线程设置，以及平台插件等平台相关特性的适配。从这里我们可以看到，Flutter 平台相关特性并不多，这就使得从框架层面保持跨端一致性的成本相对较低。

2. Engine

主要包含 Skia、Dart 和 Text，实现了 Flutter 的渲染引擎、文字排版、事件处理和 Dart 运行时等功能。Skia 和 Text 为上层接口提供了调用底层渲染和排版的能力，Dart 则为 Flutter 提供了运行时调用 Dart 和渲染引擎的能力。而 Engine 层的作用，则是将它们组合起来，从它们生成的数据中实现视图渲染。

3. Framework

层则是一个用 Dart 实现的 UI SDK，包含了动画、图形绘制和手势识别等功能。为了在绘制控件等固定样式的图形时提供更直观、更方便的接口，Flutter 还基于这些基础能力，根据 Material 和 Cupertino 两种视觉设计风格封装了一套 UI 组件库。我们在开发 Flutter 的时候，可以直接使用这些组件库。

通过上面的架构可以看出，底层使用Skia引擎来统一渲染，上层开发接口和功能体验也就随即统一了，开发者再也不用操心平台相关的渲染特性了。也就是说，Skia 保证了同一套代码调用在 Android 和 iOS 平台上的渲染效果是完全一致的。

四、Flutter是如何实现跨平台的?

1. 自绘UI

引擎基于 Skia 绘制，操作 OpenGL、GPU，不需要依赖原生的组件渲染框架。

Flutter绘制过程

Layer Tree：这个是dart runtime输出的一个树状数据结构，树上的每一个叶子节点，代表了一个界面元素（Button，Image等等）。
Skia：这个是谷歌的一个跨平台渲染框架，从目前IOS和anrdroid来看，SKIA底层最终都是调用OpenGL绘制。Vulkan支持还不太好，Metal还不支持。
Shell：这里的Shell特指平台特性（Platform）的那一部分，包含IOS和Android平台相关的实现，包括EAGLContext管理、上屏的操作以及后面将会重点介绍的外接纹理实现等等。
从图中可以看出，当Runtime完成Layout输出一个Layertree以后，在管线中会遍历Layertree的每一个叶子节点，每一个叶子节点最终会调用Skia引擎完成界面元素的绘制，在遍历完成后，在调用glPresentRenderBuffer（IOS）或者glSwapBuffer(Android)按完成上屏操作。

在Android中的层级关系图如下：

关键类层级关系

SurfaceView
TextureView

2. PlatformChannel

在实际的开发过程中，我们时常要从flutter端访问native的数据或者硬件能力，这个时候需要使用到Platform Channel进行通信

channel示意图

五、混合框架的搭建

对于这种新型技术，为了降低引入的风险，一般都会逐步地迁移和体验，这样就涉及到混合项目的搭建，native和flutter两端的页面交互和数据同步等问题

1、混合栈管理

为了实现高效、便捷的栈管理和页面交互，我们引入了闲鱼开源的FlutterBoost，它主要为我们解决了以下一些痛点：

统一了native和flutter之间跳转方式
提供与native一致的生命周期管理
优化FlutterEngine的使用，减少内存消耗
其他（比如黑屏闪屏的坑）

FlutterBoost和其他常规方案对比如下：

路由方案对比

2、自定义插件封装

混合项目绕不开两端的数据交互，于是我们基于MethodChannel封装了一些常用的插件，主要用来打通native和flutter两端的数据同步和硬件访问能力

3. 整体架构

我们使用google官方的方式，将Flutter模块作为一个module，让native那边依赖，形成了下的架构

整体架构

六、仓库和依赖管理

为了方便Android和iOS两端能够同步地访问代码，我们将Flutter模块单独抽取到一个仓库，然后提供给native去依赖

1. 仓库地址

Flutter模块仓库地址：http://git.fcbox.com/WA/ANG/flutter/Honey-Flutter
iOS丰蜜项目仓库地址：http://git.fcbox.com/WA/iOS/Hiveoperation.git
Android丰蜜项目仓库地址：http://git.fcbox.com/WA/ANG/Honey

2. 依赖关系

仓库依赖.png

七、落地效果

丰蜜项目中已经实现了“个人中心”模块的Flutter重构工作，并且成功地接入到Android和iOS两端，目前看来效果很理想，release包的体验几乎和原生无异，主要改造的界面如下：

1. Android端效果图

Android端效果图

2. iOS端效果图

iOS端效果图

3. 动态效果

ezgif.com-video-to-gif (1).gif

八、总结

1. 收益

使用Flutter混编，大概有80%以上的代码能够公用，剩余一小部分需要两端单独处理，总的来说Flutter在两个平台上的UI一致性是非常好的，帧率也比较稳定，后面推广开来的话，会对APP端的开发效率有一个大幅提升

2. 展望

将Flutter部分的基础和公共代码封装成框架，方便其他项目引入
Flutter官方目前也在适配Web端，时机成熟，甚至可以一套代码3端公用
动态化方案研究
包体大小优化（目前丰蜜的relaese包在Android端增加8M左右，iOS端压增加15M左右）

3. 上手难度

移动端的开发思维其实是相通的，Dart语言对于Android和iOS端的同学来说还是很好上手的，语法有点Java和Kotlin、Swift的影子。Flutter的设计思想也是受React启发，一切都是Widget，没有像android ios 那些些activity fragment 杂七杂八的概念，所以Web端的同学学习起来也更容易理解

Flutter for Android开发者
Flutter for iOS开发者
Flutter for Web开发者