从顶部观看Flutter的架构与原理

Flutter 重写了一套包括底层渲染逻辑和上层开发语言的完整解决方案。这样不仅可以保持试图渲染在Android和ios上的高度一致，在代码执行效率和渲染性能上也可以媲美原生App的体验。

那么，flutter是如何完成组件的渲染呢？

在计算机系统中，CPU把计算好的内容交给GPU，有GPU完成渲染后放入帧缓冲区，随后视频控制器根据垂直同步信号VSync从帧缓冲区中读取帧数据交给显示器完成图像显示。

（Skia是一个底层图像渲染的引擎，具体是怎么工作的，我也不了解，我只知道flutter将合成好的视图数据通过skia交给GPU渲染。）

接下来，我们来深入了解一下flutter的实现原理。

下面是flutter的架构图

图片来源自Flutter 架构概览 | Flutter 中文文档 - Flutter 中文开发者网站 - Flutter

架构采用分层设计，从下到上分别为三层，依此是Embedder、Engine、Framework。

• Embedder 是操作系统适配层，实现了渲染Surface设置、线层设置，以及平台插件等平台相关特性等适配。

• Engine 层 主要包含Skia、Dart和Text，实现了Flutter的渲染引擎、文字排版、事件处理和Dart运行时等功能。Skia和Text为上层接口提供了调用底层渲染和排版的能力，Dart提供了运行时调用dart和渲染引擎的能力，所以Engin层的作用则是将他们组合起来，从它们生生的数据中实现视图渲染。

• Frame层则是一个用Dart实现的UI SDK，包含了动画、图形绘制和首饰识别等功能。

最后来讲一下flutter是如何工作的。

页面中各个widget以树的形式组成控件树，flutter通过控件树中的每个控件创建不同类型的渲染对象，组成渲染对象树。渲染对象树有四个过程：布局、绘制、合成、渲染。

• 布局：Flutter采用深度优先算法遍历渲染对象树，决定渲染对象树中各渲染对象在屏幕上的位置和尺寸。

• 绘制：Flutter会把所有的渲染对象绘制到不同的图层上。

• 合成和渲染：对所有的图层根据大小、层级、透明度等规则计算出最终的显示效果，将相同的图层归类合并，简化渲染树。合并完成以后，flutter会将几何图层数据交由Skia引擎加工成二维图像数据，最后交给GPU进行渲染，完成界面的展示。