Flutter开发者

Widget是如何工作的

2020-05-18

Widget是如何工作的

在前面我们介绍各种各样的Widget,相信大家对Wiget的使用都已经有了自己的认识,今天我们就从底层角度看下Widget是如何工作,是什么支撑起了Wiget这个系统。

其实,Widget并不是我们真正看到的视图,背后究竟是什么?其实Flutter Framework提供了三种视图树,即:Widget 、Element、 RenderObject,只不过,我们使用Flutter开发界面时,通常只和widget打交道。

Widget

Widget是用户界面的一部分,并且是不可变的(immutable)。Widget会被inflate到Element,并由Element管理底层渲染树。

Widget本身没有可变状态(所有的字段必须是final)。如果想要把可变状态与Widget关联起来,可以使用StatefulWidget,StatefulWidget通过使用StatefulWidget.createState方法创建State对象,并将之扩充到Element以及合并到树中。

Widget通过createElement方法使得子类创建Element

1
2
3
4
5
6
7
@immutable
abstract class Widget extends DiagnosticableTree {
/// Initializes [key] for subclasses.
const Widget({ this.key });
///Inflates this configuration to a concrete instance.
@protected
Element createElement();

Element

Element 是 Widget 的一个实例化对象,它承载了视图构建的上下文数据,是连接结构化的配置信息到完成最终渲染的桥梁,它是我们最终看到的对象。

Element也可以理解为,Widget中额外的属性,可以用来存储Widget的状态和额外的值。

再来看看文档中对于Element的介绍:

An instantiation of a Widget at a particular location in the tree.

Element是在树中特定位置Widget的实例;

Flutter 渲染过程,可以分为这么三步:

  • 首先,通过 Widget 树生成对应的 Element 树;
  • 然后,创建相应的 RenderObject 并关联到 Element.renderObject 属性上;
  • 最后,构建成 RenderObject 树,以完成最终的渲染。

可以看到,Element 同时持有 Widget 和 RenderObject。而无论是 Widget 还是 Element,其实都不负责最后的渲染,只负责发号施令,真正去干活儿的只有 RenderObject

由于Widget是不可变的,所以我们不能让Widget直接去跟RenderObject联系来进行渲染工作,因为如果这样我们每次改变一个Widget下层的Widget都需要重新构建,这大大增加了底层渲染的成本。

但是Element是可变的,我们可以借助于Element来和RenderObject沟通,只将真正需要修改的部分同步到真实的 RenderObject 树中,最大程度降低对真实渲染视图的修改,提高渲染效率,而不是销毁整个渲染视图树重建。

在第一次创建 Widget的时候,会对应创建一个Element, 然后将该元素插入树中。如果之后 Widget 发生了变化,则将其与旧的 Widget进行比较,并且相应地更新 Element。重要的是,Element 被不会重建,只是更新而已。

RenderObject

An object in the render tree

RenderObject渲染对象,从名字我们就可以很简答的知道它是真正负责渲染的,负责最终的layout和paint操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
abstract class RenderObject extends AbstractNode with DiagnosticableTreeMixin implements HitTestTarget {

void markNeedsLayout() {
...
}

void markNeedsPaint() {
...
}

void layout(Constraints constraints, { bool parentUsesSize = false }) {
...
if (sizedByParent) {
performResize();
}
...
performLayout();
...
}

void performResize();

void performLayout();

void paint(PaintingContext context, Offset offset) { }
}

markNeedsLayout()标记这个RenderObject需要重新做布局。
markNeedsPaint标记这个RenderObject需要重绘。

而渲染对象树在 Flutter 的展示过程分为四个阶段,即布局、绘制、合成和渲染。 其中,布局和绘制在 RenderObject 中完成,Flutter 采用深度优先机制遍历渲染对象树,确定树中各个对象的位置和尺寸,并把它们绘制到不同的图层上。绘制完毕后,合成和渲染的工作则交给 Skia 搞定。

深入理解Element

我们接下来通过StatelessElement来看下Element,在Widget中起了什么作用

首先我们看下基类Widget

1
2
3
4
5
6
7
@immutable
abstract class Widget extends DiagnosticableTree {
/// Initializes [key] for subclasses.
const Widget({ this.key });
///Inflates this configuration to a concrete instance.
@protected
Element createElement();

然后我们看下StatelessElement的源码

1
2
3
4
5
6
7
8
9
10
abstract class StatelessWidget extends Widget {
/// Initializes [key] for subclasses.
const StatelessWidget({ Key key }) : super(key: key);

@override
StatelessElement createElement() => StatelessElement(this);

@protected
Widget build(BuildContext context);
}

可以看到,StatelessWidget通过createElement方法生成了一个StatelessElement。(注意:这里是StatelessWidget作为参数传递了进去)

然后通过build方法创建Widget并且需要传入一个BuildContext

现在我们来看StatelessElement它做了什么。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class StatelessElement extends ComponentElement {
/// 通过 StatelessWidget来创建StatelessElement
StatelessElement(StatelessWidget widget) : super(widget);

///通过父类获取Widget对象,StatelessWidget里createElement方法传入了StatelessWidget
@override
StatelessWidget get widget => super.widget as StatelessWidget;

///调用widget的build方法创建Widget,请注意这个传入初始化的值
@override
Widget build() => widget.build(this);

///更新Widget
@override
void update(StatelessWidget newWidget) {
super.update(newWidget);
assert(widget == newWidget);
_dirty = true;
rebuild();
}
}
  1. 首先通过 StatelessWidget来创建StatelessElement,当然这一步是在对应Widget中执行的。
  2. 通过父类获取Widget对象,StatelessWidget里createElement方法传入了StatelessWidget
  3. 调用widget的build方法创建Widget
  4. 最后通过根据需要执行update重新构建,并放入新的Widget

我们接着来看这个widget.build(this)方法。咦?这里怎么把StatelessElement给传进去了?不是要的是BuildContext吗?难道StatelessElement就是BuildContext的子类?

继续看源码。

1
2
3
4
5
6
7
8
9
10
11
12
13
class StatelessElement extends ComponentElement
...
abstract class ComponentElement extends Element
...

abstract class Element extends DiagnosticableTree implements BuildContext {
configuration.
[Widget.createElement].
Element(Widget widget)
: assert(widget != null),
_widget = widget;

Element _parent;

好吧这就没错了,Element果然是BuildContext的子类那么这一切都说的通了。

RenderObjectWidget

接着往下面看,我们一直在调用build方法,我们在开发中也经常写包含Build的代码,到底怎么来绘制的

1
2
3
4
5
6
7
8
9
@override
Widget build(BuildContext context) {

return Container(
alignment:Alignment.center,
color: Colors.red,
child: Text("我是test1的内容区域"),
);
}

首先传入了一个Container,由于它是一个布局所以它并不直接参与绘制,它往往只参与布局工作,绘制工作往往由相关的子Widget或者相关属性Widget来进行绘制。

以上面的例子为例,我们来看Container的build方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@override
Widget build(BuildContext context) {
Widget current = child;

if (alignment != null)
current = Align(alignment: alignment, child: current);

if (effectivePadding != null)
current = Padding(padding: effectivePadding, child: current);

if (color != null)
current = ColoredBox(color: color, child: current);

if (decoration != null)
current = DecoratedBox(decoration: decoration, child: current);
……

return current;
}

实际上Container会根据相关的属性拆封成对应的组件来构建,由源码来看,这个过程是依次执行绘制的。

依我们的例子为例,我们首先根据alignment进行位置构建,然后根据color进行构建,最后才返回这Wdiget。

可以看到,alignment和color对child分别执行了一直构建操作,最后交给了Text来进行处理。

说了这么多到底怎么来绘制啊,接着外下看

1
2
3
4
class Align extends SingleChildRenderObjectWidget {}
class Padding extends SingleChildRenderObjectWidget {}
class ColoredBox extends SingleChildRenderObjectWidget {}
class ColoredBox extends SingleChildRenderObjectWidget {}

Text的build方法中返回了一个RichText,所以Text本身也是RichText,这里不再贴这部分源码了。

1
2

class RichText extends MultiChildRenderObjectWidget {}

这两个类有一个共同的子类那就是RenderObjectWidget。

继续来看RenderObjectWidget方法

1
2
3
4
5
6
7
8
9
10
11
12
abstract class RenderObjectWidget extends Widget {
@override
RenderObjectElement createElement();

@protected
RenderObject createRenderObject(BuildContext context);

@protected
void updateRenderObject(BuildContext context, covariant RenderObject renderObject) { }

void didUnmountRenderObject(covariant RenderObject renderObject) { }
}

RenderObjectWidget是一个抽象类,MultiChildRenderObjectWidget和SingleChildRenderObjectWidget都是它的子类,这个类中同时拥有创建 Element、RenderObject,以及更新 RenderObject 的方法。

但实际上,RenderObjectWidget 本身并不负责这些对象的创建与更新

对于 Element 的创建,Flutter 会在遍历 Widget 树,调用 createElement 去同步 Widget 自身配置,从而生成对应节点的 Element 对象。而对于 RenderObject 的创建与更新,其实是在 RenderObjectElement 类中完成的。

同样的来看RenderObjectElement

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
abstract class RenderObjectElement extends Element {
RenderObjectElement(RenderObjectWidget widget)
@override
RenderObjectWidget get widget => super.widget as
@override
RenderObject get renderObject => _renderObject;
@override

void mount(Element parent, dynamic newSlot) { super.mount(parent, newSlot);
_renderObject = widget.createRenderObject(this); attachRenderObject(newSlot);
_dirty = false;
}

@override void update(covariant RenderObjectWidget newWidget) {
super.update(newWidget);
widget.updateRenderObject(this, renderObject);
_dirty = false; }
}

在 Element 创建完毕后,Flutter 会调用 Element 的 mount 方法。在这个方法里,会完成与之关联的 RenderObject 对象的创建,以及与渲染树的插入工作,插入到渲染树后的 Element 就可以显示到屏幕中了。

继续来看StatelessElement的update方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
void update(covariant Widget newWidget) {

assert(_debugLifecycleState == _ElementLifecycle.active
&& widget != null
&& newWidget != null
&& newWidget != widget
&& depth != null
&& _active
&& Widget.canUpdate(widget, newWidget));
assert(() {
_debugForgottenChildrenWithGlobalKey.forEach(_debugRemoveGlobalKeyReservation);
_debugForgottenChildrenWithGlobalKey.clear();
return true;
}());
_widget = newWidget;
}

判断新的widget是否与老的widget相同,如果不是同一个Widget就执行,遍历View树并移除子Widget,最后在原来的位置放上新的Widget。

对于StatelessElement它仅在第一个初始化和hot reload时会被调用,并且只会在应用active时有效。

到这里Flutter中Widget的创建基本流程就完成了,下篇我们来看下StatfulWidget的基本流程。

小结

  • 在Flutter中Widget是不可变的并不负责界面的绘制。

  • Element 则是 Widget 的一个实例化对象,我们经常用到BuildContext就是Element的子类。

  • RenderObject负责界面的布局和绘制。

  • RenderObjectWidget(RenderObjectElement)是这样一个Widget,它通过mount方法来创建一个RenderObject.

使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

打赏请备注姓名或者昵称,方便我后期统计哦

关注公众号,及时查阅最新文章