文章目录

Flutter页面更新流程剖析
- 更新流程
- 渲染过程
- 视频课程

博主相关文章列表
Flutter 框架实现原理
Flutter 框架层启动源码剖析
Flutter 页面更新流程剖析
Flutter 事件处理源码剖析
Flutter 路由源码剖析
Flutter 安卓平台源码剖析（一）
Flutter 自定义控件之RenderObject

Flutter页面更新流程剖析

更新流程

当我们需要更新页面时，会调用setState方法，这里我们就以之为突破口，研究一下页面更新的流程。

flutter\lib\src\widgets\framework.dart

/// [State]void setState(VoidCallback fn) {final dynamic result = fn() as dynamic;_element.markNeedsBuild();
}

删除断言后，其实只有两行代码，首先是执行了传入的闭包，接着调用markNeedsBuild()方法

/// [Element]void markNeedsBuild() {if (!_active)return;if (dirty)return;// 将当前的Element标记为_dirty，表示需要重建_dirty = true;// 将当前元素添加到 dirty 元素列表中，这样当[WidgetsBinding.drawFrame]调用[buildScope]时它就会被重建owner.scheduleBuildFor(this);
}

这里调用了BuildOwner中的scheduleBuildFor方法

/// [BuildOwner]void scheduleBuildFor(Element element) {if (element._inDirtyList) {_dirtyElementsNeedsResorting = true;return;}if (!_scheduledFlushDirtyElements && onBuildScheduled != null) {_scheduledFlushDirtyElements = true;// 执行_handleBuildScheduled回调onBuildScheduled();}// 添加到 dirty 元素列表_dirtyElements.add(element);element._inDirtyList = true;
}

在《框架启动源码剖析》一文中，我们剖析过WidgetsBinding的初始化

/// [WidgetsBinding]void initInstances() {super.initInstances();_instance = this;_buildOwner = BuildOwner();buildOwner.onBuildScheduled = _handleBuildScheduled;/// ......省略......
}void _handleBuildScheduled() {// 如果我们正在构建dirty元素，则更改不应触发新的帧ensureVisualUpdate();
}// 如果此对象当前没有产生一个帧，则使用 scheduleFrame 调度一个新的帧
void ensureVisualUpdate() {switch (schedulerPhase) {case SchedulerPhase.idle:case SchedulerPhase.postFrameCallbacks:scheduleFrame();return;case SchedulerPhase.transientCallbacks:case SchedulerPhase.midFrameMicrotasks:case SchedulerPhase.persistentCallbacks:return;}
}

schedulerPhase的初始值是SchedulerPhase.idle，上面的分支执行scheduleFrame

/// [SchedulerBinding]void scheduleFrame() {// 当应用在前台可见时，_framesEnabled的值为true// 这里如果App切到后台，直接返回if (_hasScheduledFrame || !framesEnabled)return;ensureFrameCallbacksRegistered();// 执行引擎中的调度方法window.scheduleFrame();_hasScheduledFrame = true;
}void ensureFrameCallbacksRegistered() {window.onBeginFrame ??= _handleBeginFrame;window.onDrawFrame ??= _handleDrawFrame;
}

这里的scheduleFrame方法是一个引擎中的native方法，由C++实现，类似Java的JNI方法。官方对该方法做了解释

请求在下一个适当的机会调用onBeginFrame和onDrawFrame回调

void scheduleFrame() native 'Window_scheduleFrame';

这里就不跟踪C++中的具体实现了，依照给出的解释，我们查看onBeginFrame和onDrawFrame回调

/// [SchedulerBinding]void _handleBeginFrame(Duration rawTimeStamp) {if (_warmUpFrame) {_ignoreNextEngineDrawFrame = true;return;}handleBeginFrame(rawTimeStamp);
}void _handleDrawFrame() {if (_ignoreNextEngineDrawFrame) {_ignoreNextEngineDrawFrame = false;return;}handleDrawFrame();
}

到这里，正好对应上了我们在《框架启动源码剖析》渲染部分剖析的逻辑，关于handleDrawFrame的后续调用，请跳转前文，这里直接查看我们关注的逻辑，主要在buildOwner的buildScope方法中

/// [WidgetsBinding]void drawFrame() {// ......省略......try {if (renderViewElement != null)// 将被标记为dirty的Element进行rebuild()buildOwner.buildScope(renderViewElement);// 调用父类的drawFrame，这里实际上调用的是RendererBinding中的drawFrame()方法super.drawFrame();// 通过卸载任何不再活动的元素来完成元素构建过程buildOwner.finalizeTree();}// ......省略......
}

/// [BuildOwner]void buildScope(Element context, [ VoidCallback callback ]) {if (callback == null && _dirtyElements.isEmpty)return;Timeline.startSync('Build', arguments: timelineWhitelistArguments);try {_scheduledFlushDirtyElements = true;if (callback != null) {Element debugPreviousBuildTarget;_dirtyElementsNeedsResorting = false;try {callback();} finally {}}// 将dirty元素列表进行了排序_dirtyElements.sort(Element._sort);_dirtyElementsNeedsResorting = false;int dirtyCount = _dirtyElements.length;int index = 0;while (index < dirtyCount) {try {// 调用元素的rebuild_dirtyElements[index].rebuild();} catch (e, stack) {}index += 1;if (dirtyCount < _dirtyElements.length || _dirtyElementsNeedsResorting) {_dirtyElements.sort(Element._sort);_dirtyElementsNeedsResorting = false;dirtyCount = _dirtyElements.length;while (index > 0 && _dirtyElements[index - 1].dirty) {index -= 1;}}}} finally {for (final Element element in _dirtyElements) {element._inDirtyList = false;}_dirtyElements.clear();_scheduledFlushDirtyElements = false;_dirtyElementsNeedsResorting = null;Timeline.finishSync();}
}

/// [Element]void rebuild() {if (!_active || !_dirty)return;// 执行重建performRebuild();
}

这里performRebuild()是在其子类ComponentElement中实现的

/// [ComponentElement]void performRebuild() {if (!kReleaseMode && debugProfileBuildsEnabled)Timeline.startSync('${widget.runtimeType}',  arguments: timelineWhitelistArguments);Widget built;try {// 调用与该元素关联的Widget的build方法，重建控件树built = build();debugWidgetBuilderValue(widget, built);} catch (e, stack) {} finally {// 我们将元素标记为clean的时间延迟到调用build()之后，这样在build()期间尝试markNeedsBuild()就会被忽略_dirty = false;}try {// 更新元素树_child = updateChild(_child, built, slot);} catch (e, stack) {}if (!kReleaseMode && debugProfileBuildsEnabled)Timeline.finishSync();
}

这里元素树的更新逻辑，都在updateChild方法中，前面已经分析过，参见《框架启动源码剖析》

我们还可以看一下build()方法的具体实现，不同的Element，其实现不同

/// StatelessWidget对应的Element
class StatelessElement extends ComponentElement {StatelessElement(StatelessWidget widget) : super(widget);@overrideStatelessWidget get widget => super.widget as StatelessWidget;// build中的context参数实际上就是Widget对应的Element对象@overrideWidget build() => widget.build(this);@overridevoid update(StatelessWidget newWidget) {super.update(newWidget);assert(widget == newWidget);_dirty = true;rebuild();}
}

/// StatefulWidget对应的Element
class StatefulElement extends ComponentElement {StatefulElement(StatefulWidget widget): _state = widget.createState(),super(widget) {_state._element = this;_state._widget = widget;}@overrideWidget build() => _state.build(this);State<StatefulWidget> get state => _state;State<StatefulWidget> _state;// ......省略......
}

渲染过程

当需要更新页面的时候，由应用上层通知到Engine，Engine会等到下个Vsync信号到达的时候，去通知Framework上层，然后Framework会进行Animation, Build，Layout，Compositing，Paint，最后生成layer提交给Engine。Engine会把layer进行组合，生成纹理，最后通过OpenGl接口提交数据给GPU， GPU经过处理后在显示器上面显示

视频课程

如需要获取完整的Flutter全栈式开发课程，请 点击跳转