Flutter技术调研报告

作者: Android团队 – 余天然 杨继宇

1.Flutter简介

1.1.什么是Flutter

Flutter是Google开发的一套全新的跨平台、开源UI框架，支持iOS、Android系统开发，并且是未来新操作系统Fuchsia的默认开发套件。自从2017年5月发布第一个版本以来，目前Flutter已经发布了近60个版本，并且在2018年12月初发布1.0稳定版。

在Flutter诞生之前，已经有许多跨平台UI框架的方案，比如基于WebView的Cordova、AppCan等，还有使用HTML+JavaScript渲染成原生控件的React Native、Weex等。

Flutter与用于构建移动应用程序的其它大多数框架不同，因为Flutter既不使用WebView，也不使用操作系统的原生控件。Flutter使用Skia作为其2D渲染引擎。

注意：Android系统内置Skia,iOS系统未内置Skia，所以ios的包会比Android更大。

1.2.Flutter架构图

• Flutter Framework：纯 Dart实现的 SDK

  • 底下两层：底层UI库，提供动画、手势及绘制能力

  • Rendering层：构建UI树，当UI树有变化时，会计算出有变化的部分，然后更新UI树，最终将UI树绘制到屏幕上

  • Widgets层：基础组件库，提供了 Material 和Cupertino两种视觉风格的组件库

• Flutter Engine：纯 C++实现的 SDK

  • Skia:渲染引擎

  • Dart:Dart运行时

  • Text:文字排版引擎

1.3.Flutter渲染机制

1.Flutter 布局渲染的整体流程

在Flutter界面渲染过程分为三个阶段：布局、绘制、合成，布局和绘制在Flutter框架中完成，合成则交由引擎负责。

添加合成图层的理由：由于直接交付给 GPU 多图层视图数据是低效率的，可能会重复绘制，所以还需要进行一步图层的合成，最后才交由引擎负责光栅化视图

2.虚拟DOM技术

Widget树：就是我们的UI组件树，但这个只是一种描述信息，渲染引擎是不认识的

RenderObject树：这才是渲染引擎真的认识的，我们需要将 Widget 转化为能用来渲染视图的 Render Object

虚拟DOM解决了一个重要的矛盾：就是 DOM 操作的性能损耗与频繁进行局部 DOM 操作的矛盾

没用虚拟DOM之前：DOM会在每一次元素更新到来之时渲染一次DOM

用了虚拟DOM之后：虚拟DOM会先汇总各个元素的更新情况，通过diff算法计算出与原来 DOM 树的差异，最后通过一次 DOM 更新解决

1.4.Flutter编译机制

Flutter之所以采用Dart语言，其中很重要的一点就是因为Dart同时支持JIT和AOT两种编译方式

• 基于JIT的快速开发周期：Flutter在开发阶段采用，采用JIT模式，这样就避免了每次改动都要进行编译，实现极大的节省了开发时间；

• 基于AOT的发布包: Flutter在发布时可以通过AOT生成高效的ARM代码以保证应用性能。而JavaScript则不具有这个能力。

1. JIT，Just-in-time,动态(即时)编译，边运行边编译;

2. AOT，Ahead Of Time，指运行前编译;

1.5.Flutter项目结构

1. android:android平台相关代码

2. ios:ios平台相关代码

3. lib:flutter相关代码，我们主要编写的代码就在这个文件夹

4. test:用于存放测试代码

5. pubspec.yaml:配置文件，一般存放一些第三方的依赖。主要是用Dart的pub包管理工具

1.6.目前已使用Flutter的团队

1. 美团

2. 闲鱼

3. 腾讯NOW直播

4. Github等国外大厂

2.本次调研的目标

2.1.打包成aar，集成到老Android项目

已完成，集成过程基本顺利，除了一个assets里面的icudtl.dat文件，因为gradle脚本 3.0以上的bug，需要自己手动复制到app的assets目录下，其它的问题都不大。

2.2.集成grpc

已完成，Dart调用grpc请求的方式非常简单，一行代码可以搞定，都不需要额外的封装了

2.3.完成多Item布局的列表，实现App首页效果

已完成，实现过程中主要踩了两个坑：

1. 滚动组件里面再嵌套滚动组件，需要指定高度，不然子组件就是无限高度，导致报错

2. 纵向滑动嵌套横向滑动，需要做一下适配

其它的一些问题，主要还是API的熟悉度问题，写多了布局以后，问题都不大。

3.Flutter的优势

1. 跨平台，同一套代码适用于Android和ios两个平台，可以节省开发资源、测试资源

2. 原生性能，使用Skia作为其2D渲染引擎，既不使用WebView，也不使用操作系统的原生控件，这样不仅可以保证在Android和iOS上UI的一致性，而且也可以避免对原生控件依赖而带来的限制及高昂的维护成本

3. 开发效率高，Flutter的热重载可以快速地进行测试、构建UI、添加功能并更快地修复错误

4. 从底层C++到高层Dart，可扩展性高

5. 整体开发环境要求不高，轻量编辑器+模拟器即可完成开发，已支持IDE:Android Studio和VSCode

4.目前发现的问题

4.1.重要问题

1. 其官方编程语言为Dart，是一门全新的语言。所以说，上手成本比较高，对于移动端开发人员，语言以及框架都是全新的，整个技术栈的积累也都得从头开始

2. 编译后的包体积较大

3. 第三方工具库，目前还比较欠缺，需要自己造轮子

4. 错误提示信息不够友好，难以定位到具体代码行

5. 遇到问题的寂寞，目前应用的人群还较少，有时候遇到问题在社区里面搜不到解决方案

4.2.一般问题

1. CPU架构兼容性问题，默认生成的库文件只支持armeabi-v7a,后期应该可以修改编译配置解决此问题

2. 多个Feature同时请求时，可能有的收不到回调，这个可能是Dart的消息机制有关，需要进一步研究，非必现

3. WebView的支持很弱

4. 音视频的支持很弱

5. 整体API像Android ,对iOS开发者上手可能不是非常友好

6. 图片资源的多倍率适配问题，必须提供一倍图，会增大应用体积

7. 如何在Flutter中实现悬停效果，需要调研

8. 如何在Flutter中实现富文本效果，需要调研

9. Flutter和Android/ios之间的通讯机制，需要调研（已有MethodChannel方案，尚未实现）

10. Flutter的国际化支持，需要调研

11. Fluter UI实现嵌套层次太多，可阅读程度不高（很低 ）

12. 境外环境依赖（有国内镜像），新建项目 dart package get 不稳定

13. Flutter的设计图标准，比如像素值，和Android和ios的设计标准有区别

14. 图片和文字混排，实现比较麻烦

15. ListView的视图复用机制，需要调研，感觉View多了会有点卡顿

16. 网络图片的缓存机制，需要调研，目前Image所以支持网络图片，但是关于它的缓存，还不清楚

5.Demo调研结果

1. Dart语法上手难度：中等，Dart的语法和响应式编程理念和原生开发还是有一定差别，更偏向Web开发

2. UI实现难度：低，在绘制复杂页面方便，比原生更有优势，自定义组件非常方便

3. API丰富性：一般，目前成熟的第三方库还比较少

4. 性能：好

• 帧率：目前只绘制了首页，FPS基本在50fps以上，几乎达到了一般游戏的标准

  

• 内存：占用低，首页内存占用在60m左右，比Android原生低 Flutter绘制的首页，占用60m左右

  

Android原生绘制的首页，内置内存占用240m左右

5. 安装包体积：较大，仅仅绘制了一个首页，安装包就达到了15M。Android项目集成Flutter之前，apk体积是22M，集成Flutter之后，apk体积是32M，增加了10M。

总结：在UI方面用Flutter开发确实很有优势，可以加快开发速度，但是涉及系统服务方面的地方，还需要进一步调研

6.Demo信息

1. Apk下载地址

7.Demo用到的组件

在Flutter中，一切皆组件，这一点需要特别注意

1. StatelessWidget-无状态组件

2. StatefulWidget-有状态组件

3. Image-图片

4. Icon-图标

5. Text-文字

6. Container-容器组件，内置Padding、宽高、背景、边框等细节操作

7. Center-居中显示Layout

8. Column-纵向排列Layout

9. Row-横向排列Layout

10. Wrap-横向排列Layout，自动换行

11. CustomScrollView-支持嵌套滚动子控件的滚动视图

12. SliverToBoxAdapter-包装普通控件，适配CustomScrollView

13. ListView-单一的List组件，不支持PullRefresh

14. GideView-网格组件

15. Divider-分割线组件

8.相关资源

1. Flutter官网

2. Flutter中文网

3. Dart官网

4. Github/Flutter

5. grpc官网

6. 帮你整理一份快速入门Flutter的秘籍

7. Dart中文社区

8. 玩Android/Flutter资料

9. Github/grpc-dart

10. Github/protobuf

11. 官方pub

12. Github/awesome-flutter-cn

13. 闲鱼技术/Flutter

作者：ezbuy_Metal团队
链接：https://juejin.im/post/5c4e6dc66fb9a049eb3c516a

                        喜欢 就关注吧，欢迎投稿！