Flutter 核心渲染流程分析 [完结篇]

本文应是结尾，亦是起点。

导语

作为一个 Flutter 开发者，咱们仅需组合 widget 即可完毕各种不同的交互。这其间 Flutter 是怎样通面试毛遂自荐3分钟通用过 wflutter结构优缺点idget 完毕屏幕上的呈现？Native 层起到了怎样的效果？作为 UI 中心烘托流程的完毕篇，这次咱们不陷于每一个细节，而是从大局收拾首要流程，把握要害节点。动画图片头像关于细节的知识点，我会附上一些更深化的文章。期望能对你知道 Flutter 烘托机制有所帮忙。

---

一、缘起：面试技巧selement滑板etState()

无论是一个简单的列表，仍是一段灵巧的动画，实质线程是什么意思都是由一个个快速切换的画面组成，术语称其为「帧」。
当咱们在滑动列表，或许播映动Element画的时分。系统不断地出产帧，并将其制作面试技巧到屏幕上，element什么意思呈现出「动」起来了的感觉。

而在 Flutter 中当需求更新 UI 展示的时分，咱们第一时刻往往想到 sflutter是什么意思etState()。更新 UI 实质上，不便是用一个新的「帧」去替换上一个动画专业「帧」么。所以，其间必定会实施帧的调度逻辑。而 setState 毕竟调用到 BuildOwner.scheduleBuildFor线程的几种状况。

  /// darelementaryt
/// Adds an element to t动画大放映he dirty elements list面试毛遂自荐 so that it will be rebuelementary是什么意思ilt
/// when [WidgetsBin面试技巧ding.drawFrame线程安全] calls [buildScope].
void scheduleBuildFor(Element element) {
.......
if (!_scheduledFlushDirtyEelementarylements &&flutter结构优缺点amp; onBuildScheduled动画片猫和老鼠 != null) {
_scheduledFlushDirtyElements = true;
onBuildSched面试毛遂自荐3分钟通用uled()elements;
}
_dirtyElements.add(element);
element._inDelement滑板irtyList = t面试毛遂自荐3分钟通用rue;
........
}

办法中有两个要害点：

1、onBuildSchedu动画片少儿小猪佩奇led()

2、将 element 添加到flutter中文网 _dirtyElements 中

第二点没什么好说，后边会用到，要害先看第一点。盯梢引证，会发现第一个办法毕竟会实施到 SchedulerBflutter结构inding.scheduleFrame()，这便是制作的源头。

---

二、烘托来历：SchedulerBinding.sche动画片少儿duleFrame()

  /// dart
/// 调用 C++ 到 Native 层，央求 Vsync 信号
void scheduleFrame(elementanimation) {
if (_haelements翻译sScheduledFrame || !_framesEnabled)
return;
ensureFrameCallbacksRegielementary schoolsteredflutter怎样读音发音();
window.scheduleFrame();
_hasScheduElementledFrame = true;
}

这个办法代码量并不多，要害在 window.schedul面试毛遂自荐3分钟通用eFrame() ，这是一个 native 办法。

  void sch线程数eduleFrame() native 'Window_scheflutter菜鸟教程duleFrame';

以安卓为例，毕竟会实施到 JNI_OnLoad 注册的 Java 接口 AsyncWaiflutteredtForVsyncDelegate.asyncWa面试itForVsync，这个接口在 Flutter 发动时初始化。完毕内容如下

new FlfluttershyutterJNI.AsyncWaitFo线程撕裂者rVsyncDelegate() {
@Override
public vflutter面试题oid asyncWaitForVsync(long cookie) {
Choreographer.getInstance()
.postFrameCelement是什么牌子allback(
new Choreographer.FrameCallback() {
@Overridefluttering
public void doFrame(long frameTimeNanos) {
fl动画片少儿小猪佩奇oat fps = windowManflutter结构优缺点ager.getDefaelementsultDisplay().getRefreshRate();
long refreshPeriodNanos = (long) (1000000000.0 /flutter中文网 f动画片汪汪队ps);
FlutterelementuiJNI.nativeOnVsync(
fra面试毛遂自荐简单大方meTimeNanos, frameTimeNanos + refreshPeriodNanos, cookie);
}
});
}
}

初始化能够看：深化了解Flutter引擎发动

ChoreoFluttergrapher.gflutter中文网etInstance().postFrameCallback 用于监听系统笔直同步信号，在下一个笔直信号来暂时回调 doFrame，经过 FlutterJNI.flutterednativeOnVsync 走到 c++ 中。经过杂乱的链路，elementanimation将下面的使命添加到到 UI Task Runner 中的作业行列中：

lib/ui/window/platform_configuration.cc
void PlatformConfiguration::BeginFrame(fml::TimePoint frelementary是什么意思ameTime) {
.................
// 调用 dart 中elementary的 _window.onBeginFrame
tonic::LogIfError(线程
tonic::DartInvoke(begin_frame_.Get(), {Dart_NewInteflutter结构优缺点ger(microseconds),}));
// 实施 microflutter结构优缺点Task                                          
UIDartState::C面试urrent()->FlushMicrotasksNow();
// 调用 dart 中的 _window.onDrawFram面试毛遂自荐e
tonic::LogIfError(tonic::DartInvokeVoid(draw_frame_.Get()));
}

回调的初flutter菜鸟教程始化流程可看：Flutter烘托机制—UI线程（文章依据 sdk 版别较早，部分函面试技巧和注意事项数方位有所修正）

这个办法有三个首要流程：

1、实施 window.onBegin线程数Frame，这个办法映射到 dart 中的 handleBeginFrame()

2、接着实施 MicroTask 行列（所以 MicroTask 不仅只在某个 Event 实施后被调度）

3、毕竟实施 window.onDrawFrame线程，对应 d线程和进程的区别是什么art 中的 drawFrame()

2 很好了解，便是实施 MicroTask 下面咱们首要剖析 1 和 3。

总结：整个流程由 Dart 主张，经过 C++ 回调到 Native 层，注册一次笔直同步信号的监听。比及信号来到，再奉告 Dart 进行烘托。能够看出，动画片汪汪队Flutter 上的烘托，是先flutter菜鸟教程由 Dartelementary 侧主动主张，而不是被迫等待笔直信号的奉告。这能够解说，比如一elementary些静动画片汪汪队态页面时，整个屏幕不会屡次烘托。并且由所以 Native 层的笔直同步信号，所以也彻底适配高刷的动画大放映设备。

---

三、Flutter 调度生命周期

剖析 handleBeginFrame 和 drawFrame 其实并不杂乱，从 Felement滑板lutter 的调度状况并可把握。

在 SchedulerBinding 中界说五种调度状况的枚举（按先后顺序排列element滑板）：

枚举值	说明
SchedulerPhase. transientCallbacks	handl动画梦工厂eBeginFrame 触发，实施_transientCallbaflutter面试题cks调会合的使命面试常见问题及回答技巧。断章取义，_transientCallbacks 是一个暂时性的集结，往往经过 Ticker 向里面添加一些动画使命。
SchedulerPhase. midFrameMicrotasks	这个状况的改动在 handleBeginFrame 中，但实践面试技巧的使命是，由 C++ 调度 MicroTask（上面的 2）。
SchedulerPhase. pers面试常见问题及回答技巧istentCallbacks	handleDrawFrame 触发，element滑板实施 _persistentCallbacks 调会合的使命。这些使命是一帧制作一切必要的，例如 build、layout、paint。
SchedulerPhase. postFrameCallbacks	handleDrawFrame 触发，在上一个的使命集结实施完毕后，flutter中文网实施 _postFrameCallbacks调会合的使命。因为系统现已 layout ，所以能够在这个阶段获取 widget 的尺度信息（RenderBox、RenderSliver）。
SchedulerPhase.idle	handleDrawFrame 触发，一切的使命都已实施完毕，处于闲暇阶段。

一帧的调度会经过五种状况的改动，咱们再结合来看 handleBeginFrame 和 drawFrame。

handleBeginFrame：处理烘托前的使命

这个办法中首要处理一些暂时性的使命，比如动画。因为例如咱们做一个 widget 放大的动画，实质上便是在每个笔直信号来临的时分，核算其对应的巨细状况并且将其制作。或许有的页面有动画，有时分没有。所以这是一个「暂时性」的使命集结。对应会改flutter怎样读音发音变到生命周期中的 SchedulerPhase. transientCallbacks 和 SchedulerPhaflutter怎样读音发音se. midFrameMicrotasks 状况。

动画回调进程能够看：F面试lutter AnimationController回调原理

drawFrame：中心烘托流程

这里是烘托的中心流程，经过源线程安全码注释elementary school能够知道，一帧烘托一共有 10 步：

其间 1 和 2 在 handleBeginFrame 现已提到，在剩余的进程中，和烘托相关比较紧密的首要有三步:

• Build：还记得一开始 setState动画片少儿小猪佩奇() 将 elem线程是什么意思ent 加入了脏集结么？这个阶段，Flutter 会经过 widget 更新一切脏调会合的节点（面试毛遂自荐一分钟需求更新）中的 el线程池创建的四种ement 与 RenderObject 树。

Build 阶段细节：原本我一直在差错的运用 setState()? 以及 面试官问我State的生命周期，该怎样答复

• Layout：RenderObject 树进行布局丈量，用于确定每一个展示元素的巨细和方位。

Layout 阶段细节：总结了30个比如之后，我悟到了Flutte线程的几种状况r的布局原理 以及 花两天时刻做了15个比如的解析，彻底把握element什么意思Flutter的布局原理

• Paint：Paint 阶段会触发 RenderObject 目标制作，生成第四棵树：Lflutteredayer Tree，fluttershy毕竟合成光栅化后完毕烘托。

Paint阶段细节：张风捷特烈，捷特大佬，制作的神，引荐买小册看看。

---

总结

要害点：

1、scheelement滑板duleFrame 回调 C线程++ 注册 Vsync 信号

2、Vsnc 来临，回调 C++ 调用 window.onBeginFrame，window.onDrawFrame

3、drawFrame 中，build 阶段依据 widget 生成 element 和 renderObjeflutter面试题ct 树；layout 丈量制作元素的巨细和方位；elementanimationpaint 阶段生成 layer 树；

4、了解调度生命周期每个状况的含义与效果

整个流程如下：

---

毕竟

这是 UI 机制专栏的毕竟一篇，但elementary就如最初所说，我觉得这既是毕竟一篇，也能够是第一篇。不拘泥于细节，先从整体学习思维。然后抽丝剥茧，学习其间规划的技巧，我认为是比较好的学习办法。

ps：写作不易，点赞投币~

列表流通度优化分帧组件即将走完审理流程，估计下周内完毕发布，欢迎flutter结构注重我线程数的动态。面试技巧

往期优质专栏：

怎样规划并完毕一个高性能的Flutter列表

Flutter中心烘托机制

Flutter路由规划与源码解析

Flutter作业分发

大众号：进击的Flu面试毛遂自荐模板tter或许 runflutter 里面收拾收集了最详细的Flutter进阶与优化指南面试毛遂自荐一分钟，欢迎注重。