Flutter面试：渲染原理

页面中的各界面元素（Widget）以树的形式组织，即控件树。Flutter通过控件树中的每个控件创建不同类型的渲染对象，组成渲染对象树。而渲染对象树在Flutter的展示过程分为三个阶段：布局、绘制、合成和渲染。

创新互联建站主营象州网站建设的网络公司,主营网站建设方案,成都App定制开发,象州h5小程序开发搭建,象州网站营销推广欢迎象州等地区企业咨询

（一）布局

Flutter采用深度优先机制遍历渲染对象树，决定渲染对象树中各渲染对象在屏幕上的位置和尺寸。在布局过程中，渲染对象树中的每个渲染对象都会接收父对象的布局约束参数，决定自己的大小，然后父对象按照控件逻辑决定各个子对象的位置，完成布局过程。

为了防止因子节点发生变化而导致整个控件树重新布局，Flutter加入了一个机制——布局边界（Relayout Boundary），可以在某些节点自动或手动地设置布局边界，当边界内的任何对象发生重新布局时，不会影响边界外的对象，反之亦然。

二）绘制

布局完成后，渲染对象树中的每个节点都有了明确的尺寸和位置。Flutter会把所有的渲染对象绘制到不同的图层上。与布局过程一样，绘制过程也是深度优先遍历，而且总是先绘制自身，再绘制子节点。

以下图为例：节点1在绘制完自身后，会再绘制节点2，然后绘制它的子节点3、4和5，最后绘制节点6。

可以看到，由于一些其他原因（比如，视图手动合并）导致2的子节点5与它的兄弟节点6处于了同一层，这样会导致当节点2需要重绘的时候，与其无关的节点6也会被重绘，带来性能损耗。

为了解决这一问题，Flutter提出了与布局边界对应的机制——重绘边界（Repaint Boundary）。在重绘边界内，Flutter会强制切换新的图层，这样就可以避免边界内外的互相影响，避免无关内容置于同一图层引起不必要的重绘。

重绘边界的一个典型场景是Scrollview。ScrollView滚动的时候需要刷新视图内容，从而触发内容重绘。而当滚动内容重绘时，一般情况下其他内容是不需要重绘的，这时候重绘边界就派上用场了。

（三）合成和渲染

终端设备的页面越来越复杂，因此Flutter的渲染树层级通常很多，直接交付给渲染引擎进行多图层渲染，可能会出现大量渲染内容的重复绘制，所以还需要先进行一次图层合成，即将所有的图层根据大小、层级、透明度等规则计算出最终的显示效果，将相同的图层归类合并，简化渲染树，提高渲染效率。

合并完成后，Flutter会将几何图层数据交由Skia引擎加工成二维图像数据，最终交由GPU进行渲染，完成界面的展示。

四、总结

咱们从各种业界主流跨端方案与Flutter的对比开始，到Flutter的简要介绍以及Flutter的运行机制，并以界面渲染过程为例，从布局、绘制、合成和渲染三个阶段讲述了Flutter的实现原理。相信大家对Flutter已经有一个整体认知，赶快一起上手操作起来吧！

二、Flutter的渲染机制以及setState()背后的原理

开始FrameWork层会通知Engine表示自己可以进行渲染了，在下一个Vsync信号到来之时，Engine层会通过Windows.onDrawFrame回调Framework进行整个页面的构建与绘制。每次收到渲染页面的通知后，Engine调用Windows.onDrawFrame最终交给_handleDrawFrame()方法进行处理。最后会走到 WidgetsBinding.drawFrame() = buildOwner.buildScope(renderViewElement) = _dirtyElements[index].rebuild() = performRebuild() 这里会触发当前element的widget的build方法= updateChild() 注意这里已经是子节点进行接下来的操作了= 子节点update() = 子节点rebuild() = 子节点performRebuild() ...

小结：所以说在widget树中，越高层的 build() 里调用 setState() 会导致遍历所有的子节点=遍历所有子节点的子节点...

话术总结： setState() 会将当前的 element 标记为 脏 ，并交由 buildOwner ，由 buildOwner 加入自己的 脏列表中 ,等收到页面渲染的通知后(这里流程简略掉)，会调用 buildOwenr. buildScope () ,这里会遍历 脏列表 然后每一个都会调用 rebuild() , rebuild() 又会调用 performRebuild() , performRebuild() 则会调用 build() 方法重建当前的 element ，然后调用 updateChild () 开始更新子节点,进而触发子节点的 rebuild() 方法，进行下一轮的周期...一直到最后一个节点

flutter实践 - flutter中的生命周期

与iOS的ViewController、Android的Activity一样，Flutter中的Widget也存在生命周期，并且通过State来提现。而App则是一个特殊的Widget，除了需要处理视图显示的各个阶段，还需要应对应用从启动到退出所经历的各个状态。

State的生命周期，指的是在用户参与的情况查下，其关联的Widget所经历的从创建到显示再到更新最后到停止，直至销毁的各个过程阶段。

这些不同的阶段涉及到的特定的任务处理，正确理解State的生命周期至关重要，State的生命周期流程图图，如下所示：

从图中可以看到，State的生命周期可以分为3个阶段：创建、更新、销毁。下面将介绍每一个阶段的具体流程

State初始化时会依次执行：构造方法 - initState - didChangeDependencies - build，随后完成页面渲染

Widget的状态更新，主要由3个方法触发：setState、didChangeDependencies与didUpdateWidget。

一旦这三个方法被调用，Flutter就回销毁旧的Widget，并调用build方法重建Widget

组件销毁相对比较简单，组件被移除，或者页面销毁的时候，系统会调用deactivate和dispose这两个方法来移除或销毁组件

下面这张表格也可以帮助我们理解记忆这些调用实际

视图的生命周期，定义了视图的加载到构建的全过程，其回调机制能够确保我们可以更具视图的状态选择合适的时间做恰当的事情，而App的生命周期，则定义了App从启动到退出的全过程

在原生Android、iOS开发中，有时我们需要再对应的App生命周期事件中做相应的处理，比如App从后台进入前台，从前台退出后台，或者在UI绘制完成后做一些处理。

这样的需求，在原生开发中，可以通过重写Activity、ViewController生命周期回调方法，或者是注册应用程序的相关通知来兼容App的生命周期并做相应的处理。而在Flutter中，我们可以利用WidgetsBindingObserver类，来实现同样的需求。

下面我们看看WidgetsBindingObserver中具体有哪些回调函数：

didChangeAppLifecycleState回调函数中，有一个参数类型为AppLifecycleState的枚举类型，这个枚举类型是Flutter对App生命周期状态的封装，它的常用状态包括：

可以将App切前后台，控制台输出的App状态，可以发现：

我们可以通过下面的这张图直观的了解状态切换过程

除了需要监听App的生命周期回调做相应处理外，根据不同的需求，我们需要再组件宣讲之后做一些与显示安全相关的操作，在iOS中，可以通过GCD的方法，让操作在下一个RunLoop执行，在Android中，可以通过View.post()插入消息队列，来保证在组件渲染后进行相关操作。在Flutter中实现同样的需求会更简单：使用WidgetsBinding来实现即可

WidgetsBinding提供了单词Frame绘制回调和实时Frame绘制回调两种机制来满足不同的需求场景：

三、Flutter的渲染机制之RenderObjectWidget、RenderObjectElement、RenderObject

RenderObjectWidget 是 Widget 例如 SizeBox ， Column 等

RenderObjectElement 是这类 Widget 生成的 Element 类型，

例如 SizeBox 对应 SingleChildRenderObjectElement （单子节点的 Element ）

RenderObject 才是真正负责绘制的对象，其中包含了 paint ， layout 等方法~

Text 组件为例：

class Text extends StatelessWidget

Text build返回的是

class RichText extends MultiChildRenderObjectWidget

MultiChildRenderObjectWidget - MultiChildRenderObjectElement

RenderObjectElement 会重写 mount

遍历 _parent (就是上个节点的 element ，这个 _parent 在每次的 mount 方法设置),一直遍历知道找到最近的一个 RenderObjectElement

在回顾下 inflateWidget

SingleChildRenderObjectElement

MultiChildRenderObjectElement

inflateWidget 会触发 RenderObjectWidget 的 createElement 创建 RenderObjectElement ,

再调用 RenderObjectElement 的 mount 方法

mount 方法调用 RenderObjectWidget 的 createRenderObject 方法创建 RenderObject

然后找到最近的一个父 RenderObjectElement 调用 insertRenderObjectChild 插入 RenderObject

(注意：这里不是 RenderObjectElement 的 child ，而是 RenderObjectElement 关联的 RenderObject 的 child , element 树里面都是 element ， RenderObject 树里面都是 RenderObject )

MultiChildRenderObjectElement 多子节点挂载逻辑

多节点添加子节点逻辑

每个子节点的 parentData 的 after 用来指向前一个子节点 previous 指向下一个子节点

网页名称：flutter机制,flutter flutter
分享地址：http://myzitong.com/article/hoodds.html