Flutter中的Widget
根据类型不同,大体上可以分为以下几种:
在根Widget
类中有一个抽象方法createElement()
,也就意味着所有的Widget
子类必须实现此方法:
StatelessWidget :
StatelessElement createElement() => StatelessElement(this);
StateFulWidget :
StatefulElement createElement() => StatefulElement(this);
SingleChildRenderObjectWidget :
SingleChildRenderObjectElement createElement() => SingleChildRenderObjectElement(this);
MultiChildRenderObjectWidget :
MultiChildRenderObjectElement createElement() => MultiChildRenderObjectElement(this);
从源码中可以看到,每种Widget
都会调用createElement()
,返回不同的Element
对象.并且会传入当前的Widget
,而Element
中会引用传过来的Widget
:
Element(Widget widget)
: assert(widget != null),
_widget = widget;
所以 Element 中会持有 widget
需要注意StatefulElement
的构造方法:
StatefulElement(StatefulWidget widget)
: _state = widget.createState(), //调用 widget 的 createState() 方法,生成 state
super(widget) {
assert(state._element == null);
state._element = this;
state._widget = widget; // 把 widget 赋值给 state 中的 widget
assert(state._debugLifecycleState == _StateLifecycle.created);
}
可以看到在StatefulElement
的构造方法中,会调用widget
的createState()
方法,并且会把widget
赋值给state.widget
,所以我们能在state
中直接使用widget
.
Element
还有一个很关键的方法mount
,如下:
void mount(Element? parent, Object? newSlot) {
assert(_lifecycleState == _ElementLifecycle.initial);
assert(widget != null);
assert(_parent == null);
assert(parent == null || parent._lifecycleState == _ElementLifecycle.active);
assert(slot == null);
_parent = parent;
_slot = newSlot;
_lifecycleState = _ElementLifecycle.active;
_depth = _parent != null ? _parent!.depth + 1 : 1;
if (parent != null) {
// Only assign ownership if the parent is non-null. If parent is null
// (the root node), the owner should have already been assigned.
// See RootRenderObjectElement.assignOwner().
_owner = parent.owner;
}
assert(owner != null);
final Key? key = widget.key;
if (key is GlobalKey) {
owner!._registerGlobalKey(key, this);
}
_updateInheritance();
}
Flutter
框架会根据Widget
创建对应的Element
,不同的Widget
创建的Element
类型也是不一样的,常用的Element
有以下几种:
Element
生成以后会调用Element
的mount
方法,将生成的Element
挂载到Element
树上.这里的 createElement
和mount
都是 Flutter
框架自动调用的,不需要开发者手动调用。因此我们平时可能没关注这些过程。Element
里面的 mount
方法需要子类实现,我们来看看ComponentElement
里的 mount
方法:
void mount(Element? parent, Object? newSlot) {
super.mount(parent, newSlot);
assert(_child == null);
assert(_lifecycleState == _ElementLifecycle.active);
_firstBuild(); //调用 _firstBuild()方法
assert(_child != null);
}
顺着_firstBuild()
查看,发现他们的调用链如下:
StatelessElement 的 build()
方法实现如下:
Widget build() => widget.build(this);
最后实际调用的是Widget
的build()
方法;
而StatefulElement
中build()
方法有些不一样:
Widget build() => state.build(this);
StatefulElement
中build()
方法实际调用的是state 的 build()
方法.
小总结:
创建 widget 时,Flutter 框架会自动调用 createElement() 生成对应的 Element,Element 生成后会自动调用 Element 的 mount() 方法将当前的 Element 挂载到 Element 数上.而在 mount() 方法内部会调用 StateLessWidget 的 build() 方法 和 StateFulWidget 中 State 的 build() 方法.
现在我们知道了Element
中的mount()
方法最终都会调用build(this)
方法,并且传递的都是当前的Element
对象,而build()
方法的格式如下:
Widget build(BuildContext context) { }
所以,我们在写代码时看到的BuildContext context
就是Element
:
上面介绍的是ComponentElement 中的 mount()
方法,下面我们看看RenderObjectElement 中的 mount() 方法
:
void mount(Element? parent, Object? newSlot) {
super.mount(parent, newSlot);
...
_renderObject = widget.createRenderObject(this);
...
}
可以看到RenderObjectElement
中的mount()
方法主要调用的是Widget
中的widget.createRenderObject ()
方法生成 RenderObject
,然后赋值给自己的 _renderObject
。
因此可以总结:
一: ComponentElement 的 mount 方法主要作用是执行 build
二: RenderObjectElement 的 mount 方法主要作用是执行createRenderObject()
生成 RenderObject
Widget
中还有一个很重要的方法static bool canUpdate()
:
static bool canUpdate(Widget oldWidget, Widget newWidget) {
return oldWidget.runtimeType == newWidget.runtimeType
&& oldWidget.key == newWidget.key;
}
为了进行Element复用,在Element重新构建前会先尝试是否可以复用旧树上相同位置的element,element节点在更新前都会调用其对应Widget的canUpdate方法,主要是判断newWidget与oldWidget的runtimeType和key是否同时相等,如果同时相等就返回true,表示复用旧Element,否则返回false,重新创建。
写这篇文章是为了方便自己复习,参考了这边文章,更详细的请查看Flutter渲染之Widget、Element 和 RenderObject