Flutter技术调研报告

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更大。

Flutter技术调研报告_第1张图片
image

1.2.Flutter架构图

Flutter技术调研报告_第2张图片
image
  • 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 多图层视图数据是低效率的,可能会重复绘制,所以还需要进行一步图层的合成,最后才交由引擎负责光栅化视图

Flutter技术调研报告_第3张图片
image

2.虚拟DOM技术

Flutter技术调研报告_第4张图片
image

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项目结构

Flutter技术调研报告_第5张图片
image
  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以上,几乎达到了一般游戏的标准


    Flutter技术调研报告_第6张图片
    image
  • 内存:占用低,首页内存占用在60m左右,比Android原生低
    Flutter绘制的首页,占用60m左右


    Flutter技术调研报告_第7张图片
    image

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


Flutter技术调研报告_第8张图片
image
  1. 安装包体积:较大,仅仅绘制了一个首页,安装包就达到了15M。Android项目集成Flutter之前,apk体积是22M,集成Flutter之后,apk体积是32M,增加了10M。

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

6.Demo信息

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

你可能感兴趣的:(Flutter技术调研报告)