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
