【Flutter原理】三棵树的诞生与核心流程

网上学习 Android的资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。同时我还搜集整理2020年字节跳动，以及腾讯，阿里，华为，小米等公司的面试题，把面试的要求和技术点梳理成一份大而全的“ Android架构师”面试 Xmind（实际上比预期多花了不少精力），包含。但是如果你仅仅是看一遍，而不去学习和深究。网上学习 Android的资料一

2401_84149423

677人浏览 · 2024-04-18 18:23:53

2401_84149423 · 2024-04-18 18:23:53 发布

相信写过Flutter的开发同学都知道，我们的Flutter UI是由各色各样的Widget组成。一般情况下很少只绘制单个widget的情况。那么如何有效的编排widget的结构，以及高效的将这些widget描述信息交给Flutter Engine，从而渲染出可媲美原生UI的性能的。

本文我们就来探究下widget背后三棵树的来龙去脉。

三棵树的来源

=====================================================================

从前面的文章"Flutter入口runApp源码分析"我们知道，在WidgrtsFlutterBinding初始化以后，接着就会调用到WidgetsBinding的scheduleAttachRootWidget方法，scheduleAttachRootWidget方法内部直接异步调用了attachRootWidget，这个方法就是三棵树的起源。

直接上源码太枯燥，我们先来个时序图，跟着主步骤一步步来。

时序图

==================================================================

Flutter 三棵树时序图

根据上面的时序图我们能清楚的看到，关于Flutter widget三棵树的起源就是在WidgetsBind的attachRootWidget方法之中。

attachRootWidget分析

=================================================================================

void attachRootWidget(Widget rootWidget) {

_readyToProduceFrames = true;

// 创建RenderObjectToWidgetAdapter,RenderObjectToWidgetAdapter是RenderObjectElement和Element的桥梁。

// 第一步

_renderViewElement = RenderObjectToWidgetAdapter(

container: renderView,

debugShortDescription: ‘[root]’,

child: rootWidget,

//第二部

).attachToRenderTree(buildOwner!, renderViewElement as RenderObjectToWidgetElement?);

}

attachRootWidget方法很简单，主要分为两步:

创建RenderObjectToWidgetAdapter
调用RenderObjectToWidgetAdapter的attachToRenderTree方法

很明显核心逻辑都在RenderObjectToWidgetAdapter，RenderObjectToWidgetAdapter,其实也是一个widget，初始化的时候将rootWidget传递过去，作为child，还有个参数就是renderView，实际上是一个RenderObject。而RenderObjectToWidgetAdapter作为一个adapter的主要作用就是建立RenderObject,Element,Widget之间的桥梁。

RenderView就是渲染树的根。

刚刚讲到这里RenderObjectToWidgetAdapter就已经持有了rootWidget和rootRender两棵树的根节点，下面我们再来看，attachToRenderTree方法。

attachToRenderTree分析

===================================================================================

RenderObjectToWidgetElement attachToRenderTree(BuildOwner owner, [ RenderObjectToWidgetElement? element ]) {

if (element == null) {

owner.lockState(() {

//创建rootElement

element = createElement();

assert(element != null);

element!.assignOwner(owner);

});

owner.buildScope(element!, () {

// 核心

element!.mount(null, null);

});

SchedulerBinding.instance!.ensureVisualUpdate();

} else {

element._newWidget = this;

element.markNeedsBuild();

}

return element!;

}

这个方法的核心逻辑也比较清晰，首先来解释下两个参数：

BuildOwner owner

buildOwner来自WidgetsBinding初始化时实例化的BuildOwner实例

BuildOwner可以理解为widgets管理器，用于跟踪哪些widget需要重建，并且处理适用于整体widget树的其它任务，例如管理widget树的非活动元素列表，以及调试时热重载期间辟谣时触发重新组装指令。通常由WidgetsBind创建和拥有。

RenderObjectToWidgetElement? element

element也就是attachRootWidget传递过来的renderViewElement，其值就是_renderViewElement自己，此时由于调用完appach才赋值，所以首次进来也是null。首次进来为null的时候，就会进入到createElement()逻辑，也就是创建RootElement。

mount分析

======================================================================

我们继续看Element的mount方法
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。