APP开发平台 > Blog > 渲染管道(Rendering Pipeline)介绍

在讨论渲染管道(Rendering Pipeline)之前,首先了解Flutter三棵树模型(实际上还有一棵 Layer Tree,但是过于底层,一般不纳入讨论)

Flutter三棵树示意图


Widget Tree是开发者能够直接感知到的,但其最终形态和代码会有一些差异,因为部分Widget本身就是由其它Widget构成的。上图中的ColoredBox等Widget虽然开发者没有直接使用,但却存在于最终的Widget Tree中。每个Widget都会有对应的Element, 并有一棵对应的Element Tree,实际上Element Tree才是内存中真实存在的数据,Widget Tree和Render Tree都是由Element Tree驱动生成的。正是由于这种机制,Element Tree扮演了Virtual DOM中管理者的角色。
Element Tree中, RenderObjectElement类型的节点都会产生RenderObject并构成最终的Render Tree。对开发者来说:Render Tree时最底层的UI描述,但对Framework来说: Render Tree是Framework对UI最上层,最抽象的描述。
任何一个UI框架,无论是Web还是Android,都有自己的渲染管道,渲染管道时UI框架的核心,负责处理用户输入,生成UI描述,栅格化绘制指令,上屏最终数据等。Flutter也不例外,Flutter采用了自渲染的方式,所以渲染管道是独立于平台的。以Android为例, Flutter只是通过Embedder获取了一个Surface或Texture作为渲染管道最终的输出目标,具体来说Flutter的渲染管道分为以下七个步骤:

  1. 用户输入(User Input): 响应用户通过鼠标、键盘、触摸屏等设备产生的手势行为。

  2. 动画(Animation): 基于定时器(Timer)更新当前帧的数据。

  3. 构建(Build): 三棵树的创建,更新和销毁阶段,StatelessWidget和State的build方法将在改阶段执行。

  4. 布局(Layout): Render Tree将在该阶段完成各个节点的大小和位置计算。

  5. 绘制(Paint): Render Tree遍历每个节点,生成Layer Tree、RenderObject的paint方法在该阶段执行,生成一系列绘制指令。

  6. 合成(Composition): 处理Layer Tree,生成一个Scene对象,作为栅格化的输入。

  7. 栅格化(Rasterize):将绘制指令处理成可供GPU上屏的原始数据。

以上七个步骤中: 用户输入和动画是相对独立的过程,部分简单的静态UI不需要处理。构建、布局和绘制直接关系到Flutter三棵树的维护和使用,是Framework层的核心功能之一,是深刻理解Flutter底层工作原理的关键所在(后续文章中详细介绍)。合成和栅格化负责绘制指令的最终消费,主要逻辑在Engine中实现。



An efficient app outsourcing platform that guarantees timely delivery!

Submit Requirements