flutter 架构、渲染原理、家族_flutter支持多平台渲染的原理

Flutter 架构

引擎层

• Skia 是独立的渲染引擎库，不依赖原生引擎库
• Dart 虚拟机包含了Dart中编译方式、垃圾回收等机制的实现
• Text 负责Flutter中文字的渲染

框架层

• Foundation层是框架层的最底层，主要定义了框架层的各类基础API，提供了上一层会使用到的工具类和方法接口等。
• Animation层包含了Flutter中实现动画的相关类。Painting层中封装了Flutter引擎层提供的绘图接口，包括绘制图像、文本、阴影的功能以及自定画布等，Gestures层提供了与手势识别相关的类，包括触摸、缩放以及拖曳等。
• 而渲染层则依赖下面的Painting、Animation等层，通过调用下一层的接口可以为UI设计具体的布局，完成绘画和合成等操作。这一层也是Flutter能够将代码中的组件渲染在屏幕中的核心层。
• 组件层中提供了非常丰富的组件供我们在开发中使用，包括了基本的Text、Image、Container、TextField等组件。我们通过在代码中组合、嵌套该层中提供的不同类型的各个组件可以构建出任意功能和任意复杂度的界面。这里的组件最终也会生成一个个渲染对象，在渲染层中做具体的渲染工作，Flutter在该层的基础上也提供了Material和Cupertino两种分别对应Android与iOS视觉风格的组件库。。

Flutter 渲染原理

html 有DOM树，类似的，Flutter 有组件树，以默认的计数器应用为例：

但组件的渲染并不由组件层完成，而渲染层完成，整个渲染过程如下图：

1. 开发者用dart语言编写【组件树】（组件的配置和属性信息）
2. Flutter框架根据组件树里组件的配置和属性信息生成【元素树】（在调用 build()方法时，Flutter会根据配置信息生成一个个与组件对应的元素实例，这些元素实例与组件一一对应，是展示在屏幕上的真正的UI组件，这便创建了元素树。）
3. 最后交由RenderObject完成页面中组件的绘制和布局，形成对应的RenderObject树（也称为渲染树）

类似于公司的总经理，组件的任务就是把近期的战略部署（即配置信息）写在纸上并下发给经理人——元素，元素看到详细的配置信息就开始干活。我们还需要注意一点，总经理随时会改变战略部署，而由于组件的不可变性，它并不会在原有的纸上修改，而只能拿一张新的白纸并重新写下配置信息。这时，经理人——元素为了减少工作量需要将新的计划与旧的计划仔细比较，再采取相应的更新措施。这就是Flutter框架层在此基础上做的一部分优化操作。问题又来了，元素作为经理人很体面。当然，元素不会把活全干完，于是又找了一个叫作RenderObject的员工来帮它做粗重的工作。

由用户触发重新渲染UI的操作。用户可能会单击页面中的某个按钮，触发页面更新，接下来就会执行过渡动画，在动画执行期间，Flutter将会一直更新，直到渲染完成。构建组件的过程就是Flutter构建【组件树】【元素树】【渲染树】的过程。构建完成之后，Flutter就会通过RenderObject树上的RenderObject节点执行真正的渲染工作。

RenderObject依赖在代码中配置的组件，它会根据已经设置的属性完成接下来的布局（layout）、绘制（paint）以及合成（composite）操作。

• 布局操作会使用布局约束等原理计算各部分组件的实际大小
• 绘制过程就是根据配置的视图数据将组件的内容绘制在屏幕当中
• 合成就是将各部分的视图层合并在一起

Flutter 家族

Dart

• Dart运行在Dart 虚拟机（Virtual Machine，VM）上，但也可以编译为直接在硬件上运行的ARM代码。
• Dart同时支持预（Ahead Of Time，AOT）编译和运行时（Just-In-Time，JIT）编译两种编译方式，可以同时提高开发和执行应用程序的效率。
• Dart可以使用隔离（isolate）实现多线程。如果没有共享内存，则可以实现快速无锁分配。
• Dart虚拟机采用了分代垃圾回收方案，适用于UI框架中产生大量的组件对象的创建和销毁。
• 当为创建的对象分配内存时，Dart使用指针在现有的堆上移动，可以确保内存的线性增长，从而节省了查找可用内存的时间。

Dart还有其他各种优势。例如，当使用Dart编写应用程序时，不在需要将布局代码与逻辑代码分离而又引入xml、JSX这类模板和布局文件。

提示：

Dart语言同时支持AOT和JIT两种编译方式，而目前主流的语言大多只支持其中一种编译方式，如C仅支持AOT编译方式，JavaScript仅支持JIT编译方式。

一般来说，静态语言会使用AOT编译方式。在AOT编译方式下，编译器必须在执行代码前直接将代码编译成机器的原生代码，这样在程序运行时就不需要做其他额外的操作而能够直接快速地执行，它带来的不便就是编译时需要区分用户机器的架构，生成不同架构的二进制代码。而JIT编译方式通常适用于动态语言。在JIT编译方式下，程序运行前不需要编译代码而在运行时动态编译，不用考虑用户的机器是什么架构，为应用的用户提供丰富而动态的内容。虽然JIT编译方式缩短了开发周期，但是可能导致程序执行速度更慢。

Dart语言同时使用了以上两种编译方式，这一点为它能应用在Flutter中提供了显著的优势。在调试模式下，Dart使用JIT编译方式 ，编译器速度特别快，这使Flutter开发中支持热加载的功能。在发布模式下，Dart使用AOT编译方式，这样就能够大大提高应用运行速度。因此，借助先进的工具和编译器，Dart具有更多的优势——极快的开发周期和执行速度以及极短的启动时间。

MaterialDesign

MaterialDesign是谷歌推出的一套视觉设计语言。
Flutter引入MaterialDesign降低了开发者美化用户界面的工作量，使应用风格趋于统一。

Fuchsia

Fuchsia 是谷歌推出的可能取代Android的下一代移动操作系统。
Flutter 可能将作为Fuchsia的原生开发方式。

Flutter Web

Flutter Web 让 Flutter 已经可以同时作为移动端、Web端、桌面端的开发方式，实现一次编写，到处运行！