Flutter技术简介

1.Flutter简介

​ Flutter是Google开发的一套全新的跨平台、开源UI框架，支持iOS、Android系统开发，而且是将来新操做系统Fuchsia的默认开发套件。2017年5月发布第一个版本，而且在2018年12月初发布1.0稳定版，2019年MWC上发布1.2版本。

​ 在Flutter以前已经有好多跨平台UI解决方案，基于WebView的Cordova，基于JavaScript渲染成原生控件的React Native。而Flutter彻底颠覆了以往的依赖，使用Skia做为2D渲染引擎，自建UI。

技术类型	UI渲染方式	性能	开发效率	动态化	框架表明
H5+原生	WebView渲染	通常	高	支持	Cordova
JavaScript+原生	原生控件渲染	好	高	支持	RN
自绘UI+原生	调用系统API渲染	好	FLutter高，QT低	默认不支持	Flutter，QT

2. Flutter架构图

框架的上层比下层使用更频繁。更详细的查看API文档

• Flutter Framework：纯Dart实现的SDK
  • 底下两层：底层UI库，提供动画、绘制能力、手势
  • Rendering层：构建UI树，当UI树有变化的时候，会计算出变化的部分，而后更新UI树，将UI树绘制到屏幕上
  • Widgets层：提供组件库，提供了Material和Cupertino两种视觉风格的组件库
• Engine层：使用C/C++实现的SDK，主要包括Skia、Dart和Text
  • Skia：开源的二维图形库，提供了适用于多种软硬件平台的通用API
  • Dart部分：Dart Runtime，Garbage Collection，若是是debug模式的话，包括JIT(just in time)支持，Release和profile模式下是AOT(ahead of time)编译成了原生的arm代码，不存在JIT部分。
  • Text：文本渲染，渲染层次以下：衍生自minikin的libtxt库
• Embedder层
  • Embedder是一个嵌入层，即把Flutter嵌入到各个平台上去，这里作的主要工做包括渲染Surface设置，线程设置，以及插件等。从这里能够看出，Flutter的平台相关性很低，平台只提供一个画布，剩余全部渲染相关的逻辑都在Flutter内部，这就使得它具备很好的跨端一致性。

3. Flutter渲染机制

3.1Flutter布局渲染的整理流程

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

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

用户操做->更新动画->构建控件->布局->绘制图层->合成图层->光栅化

3.2虚拟DOM技术

Widget——>Element——>RenderObject

Widget树就是咱们的UI组件树，但这个只是一种描述信息，渲染引擎不认识，RenderObject树才是渲染引擎真的认识的，咱们须要将Widget转化为能用来渲染视图的RenderObject。

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

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

用了虚拟DOM后，虚拟DOM会先汇总各个元素的更新状况，经过diff算法计算出与原来DOM树的差别，最后经过一次DOM更新解决。

3.3构建widget

您能够经过实现widget的build返回widget树(或层次结构)来定义widget的独特特性。这棵树更具体地表示了用户界面的widget层次。例如，工具栏widget的build函数可能返回一个包含一些文本和各类按钮的水平布局。而后，框架递归地构建widget，直到将全部的widget构建完成，而后framework将他们一块儿添加到树中。

widget的构建函数通常没有反作用。每当它被要求构建时，widget应该返回一个新的widget树，不管widget之前返回的是什么。framework回将以前的构建与当前的构建比较并肯定须要对用户界面进行哪些修改。

这种自动化比较很是有效，能够实现高性能的交互式应用程序。而构建函数的设计则着重于声明widget是由什么构成的，而不是将用户界面从一个状态更新到另外一个状态，从而简化了代码。

4. 其余

4.1支持JIT和AOT运行模式

• 基于JIT的快速开发：Flutter在开发阶段采用JIT模式，支持HOT Load，避免了每次改动都要进行编译，节省开发时间。
• 基于AOT的发布包：在Flutter发布时能够经过AOT生成高效的ARM代码以保证性能。执行效率比JavaScript高。同时，在debug包上测试的时候发现运行效率不够，打一个release包会有意想不到的效果。

4.2 Flutter中一切皆widget

以前的文章里也有强调过，widget是Flutter应用程序的构建块。每一个widget都是用户界面一部分的不可变声明。与其余将视图、控制器、布局和其余属性分离的框架不一样，Flutter具备一致的统一对象模型：widget。

4.3Flutter编写并行/并发应用程序

Flutter支持isolates。isolates是Flutter虚拟机中的独立堆，他们能够并行运行(一般做为单独的线程实现)，isolates经过发送和接收异步消息进行通讯。

更多关注微信公众号：Flutter入门