Flutter组件渲染模式详解

Flutter组件渲染模式详解

前⾔

作为⼀个跨平台的框架，Flutter 的渲染机制和很多混合开发的框架具有很⼤的不同。⽬前诸如 React-Native，UniApp，Weex 等框架实际上

时在原⽣ UI 基础上做了⼀层抽象映射，试图抹平不同平台的差异。⼤部分的实现时基于 Javascript 与原⽣进⾏转译交互，实际渲染还是依赖于

原⽣平台。这种⽅式的好处是保留了原⽣ UI 的特性，当然也会带来⼀个很⼤的缺陷，那就是不同平台的差异性——虽然是同⼀套代码，但是不同

平台运⾏的界⾯效果和设计效果不⼀样。

Flutter 的⽅式与上述的框架不同，实际上的渲染过程不依赖于原⽣，⽽是通过 C/C++编写的 Skia 渲染引擎完成界⾯渲染的。绘制界⾯的Dart

代码会被编译成原⽣代码，但是使⽤的是 Skia 完成渲染。Flutter 内置了 Skia 渲染引擎，使得即便是⽤户的⼿机没有更新到最新版本的⼿机操

作系统也能够保持最新的渲染性能。

从交互到 GPU

以⼀个⽤户输⼊为例，整个交互到 CPU 的渲染过程如下图所⽰，其中框起来的部分就是渲染的过程。

渲染过程.png

Build 环节

下⾯简单的代码⽚段构建了⼀个层级简单的组件树。