Flutter 组件渲染模式详解

前言

作为一个跨平台的框架，Flutter 的渲染机制和很多混合开发的框架具有很大的不同。目前诸如 React-Native，UniApp，Weex 等框架实际上时在原生 UI 基础上做了一层抽象映射，试图抹平不同平台的差异。大部分的实现时基于 Javascript 与原生进行转译交互，实际渲染还是依赖于原生平台。这种方式的好处是保留了原生 UI 的特性，当然也会带来一个很大的缺陷，那就是不同平台的差异性——虽然是同一套代码，但是不同平台运行的界面效果和设计效果不一样。

Flutter 的方式与上述的框架不同，实际上的渲染过程不依赖于原生，而是通过 C/C++编写的 Skia 渲染引擎完成界面渲染的。绘制界面的Dart 代码会被编译成原生代码，但是使用的是 Skia 完成渲染。Flutter 内置了 Skia 渲染引擎，使得即便是用户的手机没有更新到最新版本的手机操作系统也能够保持最新的渲染性能。

从交互到 GPU

以一个用户输入为例，整个交互到 CPU 的渲染过程如下图所示，其中框起来的部分就是渲染的过程。

Build 环节

下面简单的代码片段构建了一个层级简单的组件树。

Container(
  color: Colors.blue,
  child: Row(
    chindren: [
      Image.network('https://www.juejin.com/1