深入解析 Flutter 三顆樹：Widget、Element 與 RenderObject 完整指南

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

從以上範例中的分析，這裡我們可以先觀察最常使用到的 Widget 建構，它們是一層一層包裹（Wrapper）的結構，並且其中存在著「多元樹 🌲」的關係

關係如下圖所示

而 Widget 類的重點方法有四個，如下表

A. createElement()：此方法是 Widget 最核心的部分，負責將 Widget 與 Element 系統進行對接

B. == 與 hashCode：這兩個方法用於比較和管理 Widget 的唯一性，特別是在有狀態管理和 Widget 重建過程中

C. canUpdate()：這個方法決定了當 Widget 樹發生變化時，是否應該替換現有的 Widget，還是只進行更新

Widget 是 Flutter 中最基本的構建單元，描述了應用程序的外觀和結構，並且 每一個 Widget 都是一個靜態的、不可變的配置

這樣就可以知道 Widget 的另外一個重點功能是在創建 Element 物件

而我們在寫 Flutter 應用的時候其實是不常碰到 Element，而是透過創建各種 Widget 來建構畫面，而其實 Widget 是讓我們與 Element 做隔離的元件

看看 Widget 的繼承關係，可以知道 所有繼承 Widget 的類都需要實現 Element 類，所以 Element 與 Widget 是一個一個對應的，像是…

A. StatefulWidget → StatefulElement

B. StatelessWidget → StatelessElement

C. RenderObjectWidget → RenderObjectElement

A. StatefulElement 類

B. StatelessElement 類

C. RenderObjectElement 類（跟佈局更相關的 Element）

以 Text、Column、Center、Icon、Image Widget… 來做觀察 (注意顏色、線條，個代表了不同意義)，可以看到最終元件都會與於 RenderObject 產生關係（大部分都會透過 Element 與 RenderObject 產生關係）

● 可以把 Widget 看成是一個 設計稿，將稿 (Widget) 完成後就不會再改變，這時就只需要放入對應的元件(RenderObject) 就可以生成不同的 UI 介面

RenderObject 才是真正渲染畫面的物件

A. RenderObject 類：負責繪製

B. RenderObjectElement 類：負責連接

而其中 RenderBox 有許多的衍生類（像是 RenderWrap、RenderStack、RednerFlex… 等等），簡單功能介紹如下表

從上表的介紹中，我們可以很清楚的知道 RenderBox 的子類負責各式各樣的佈局，而 RenderView 負責個別元件的渲染

看看 SDK 提供的 Widget 是否有重寫 layout、paint、handleEvent 方法，並且每個 Widget 的著重重點在哪裡

A. 可見元件 TextWidget：藉由上圖，我們這邊直接看 TextWidget 對應的 RenderBox 的子類 RenderParagraph

class RenderParagraph extends RenderBox with ... {

  final TextPainter _textPainter;

  @override
  void paint(PaintingContext context, Offset offset) {

    _layoutTextWithConstraints(constraints);

    ... 省略

    // 查看 paint 方法
    _textPainter.paint(context.canvas, offset);

    ... 省略
  }
}

// ----------------------------------------------------------
class TextPainter {
    void paint(Canvas canvas, Offset offset) {

    assert(... 略);

    // 使用 canvas.drawParagraph 繪製
    canvas.drawParagraph(_paragraph!, offset);
  }
}

B. 可見元件 ImageWidget：藉由上圖，我們這邊直接看 ImageWidget 對應的 RenderBox 的子類 RenderImage

// rendering/image.dart

class RenderImage extends RenderBox {

    @override
    void paint(PaintingContext context, Offset offset) {
        ... 略
        
        // 查看 paintImage 方法
        paintImage(
          canvas: context.canvas,
          rect: offset & size,
          image: _image!,
          ... 略
        );
    }
}

// -------------------------------------------------------------
// decoration_image.dart

void paintImage({
  required Canvas canvas,
  required Rect rect,
  required ui.Image image,
  ... 略
}) {

        // 這裡就可以證明是用 canvas 來繪畫 Image
        canvas.translate(0.0, -dy);
        canvas.scale(1.0, -1.0);
        canvas.translate(0.0, dy);

}

C. 布局元件 Column：這裡 paint 就不是重點，重點在 layout

class RenderFlex extends RenderBox with ... {
  @override
  void paint(PaintingContext context, Offset offset) {
      ...

      switch (_direction) {
        case Axis.horizontal:
          overflowChildRect = Rect.fromLTWH(0.0, 0.0, size.width + _overflow, 0.0);
          break;
        case Axis.vertical:
          overflowChildRect = Rect.fromLTWH(0.0, 0.0, 0.0, size.height + _overflow);
          break;
      }
      paintOverflowIndicator(context, offset, Offset.zero & size, overflowChildRect, overflowHints: debugOverflowHints);
  }
}

// ---------------------------------------

abstract class RenderObject extends AbstractNode with DiagnosticableTreeMixin implements HitTestTarget {

  void layout(Constraints constraints, { bool parentUsesSize = false }) {
      ... 略
  }

}

而 Element 的重點成員如下表所示

abstract class Element extends DiagnosticableTree implements BuildContext {

  bool _dirty = true;

  BuildOwner? _owner;

  Element? _parent;
  
  // 生命狀態
  _ElementLifecycle _lifecycleState = _ElementLifecycle.initial;

  Element(Widget widget)
    : assert(widget != null),
      _widget = widget;

}

enum _ElementLifecycle {
  initial,    // 初始化
  active,    // 激活
  inactive,    // 未激活
  defunct,    // 死亡
}

而生命週期的變動，是可以通過幾種方法的調用來達到… 舉例：像是通過調用 Element#mount 方法，就可以激活該元件到 active 狀態

mount 之後會再詳細介紹

// Element

void mount(Element? parent, Object? newSlot) {
    assert(_lifecycleState == _ElementLifecycle.initial);
    ...

    // 將 Widget 改為激活狀態
    _lifecycleState = _ElementLifecycle.active;

    ...
  }

  // framework.dart
  
  void mount(Element? parent, Object? newSlot) {
    ...
    _parent = parent;

    print("_parent: ${parent.runtimeType}");

    ...
  }

如下圖所見

由於這個 Tree 太長，我就不全部列出了，沒有太大的意義，重點我們可以看到 Element 的根物件的類是 RootElement

● 或是你在 Debug 模式下把斷點設置在 MyApp#build 函數中，並在進入斷點時，查看 _parent 成員，一直點到最底層也可以看到跟物件為 RootElement

A. 先把斷點下在 RootElement 類的建構函數，在 Debug 模式運行 APP

B. 在進入斷點後，單步執行，就可以發現 RootElement 是由 RootWidget 類創建

就可以發現負責渲染畫面的 渲染樹（RanderObject）的根節點就是 _ReusableRenderView，而開啟後會發現 _ReusableRenderView 就是繼承於 RenderView 類

而 _ReusableRenderView 被創建的時機則是在 runApp 初始化的過程中，下面小節會再介紹

● WidgetsFlutterBinding 類的實例是一個全局單例

● 它透過混合繼承的方式（with）讓 WidgetsFlutterBinding 有以下功能

// binding.dart

static WidgetsBinding? get instance => _instance;
static WidgetsBinding? _instance;

class WidgetsFlutterBinding extends BindingBase with GestureBinding, 
        SchedulerBinding, 
        ServicesBinding, 
        PaintingBinding, 
        SemanticsBinding, 
        RendererBinding, 
        WidgetsBinding {


  static WidgetsBinding ensureInitialized() {    
    if (WidgetsBinding.instance == null)        // 單例
      WidgetsFlutterBinding();
    return WidgetsBinding.instance!;
  }
}

// foundation/binding.dart

abstract class BindingBase {

  BindingBase() {
    ...
    initInstances();
    ...
  }


  @protected
  @mustCallSuper
  void initInstances() {
    assert(!_debugInitialized);        // 保證該函數只會執行一次
    assert(() {
      _debugInitialized = true;
      return true;
    }());
  }

}

而這些方法執行的順序就較為不同 (簡單來說 由最後一個覆寫的物件開始執行)，但是！它內部有是使用到 super 關鍵字，由於 super 與 with 的配合，最終會導致 initInstances 的順序仍是由 GestureBinding 到 WidgetsBinding

A. 先執行 WidgetsBinding 類的 initInstances 方法

// widgets/binding.dart

mixin WidgetsBinding on BindingBase, ServicesBinding, SchedulerBinding, GestureBinding, RendererBinding, SemanticsBinding {
  @override
  void initInstances() {
    super.initInstances();    // 呼叫到 RendererBinding
    _instance = this;
    ...
    _buildOwner = BuildOwner();
  }
}

B. 再接續會執行 RendererBinding 類的 initInstances 方法

mixin RendererBinding on BindingBase, ServicesBinding, SchedulerBinding, GestureBinding, SemanticsBinding, HitTestable {
  @override
  void initInstances() {
    super.initInstances();    // 呼叫到 SemanticsBinding
    ...
  }
}

C. 再接續會執行 SemanticsBinding 類的 initInstances 方法

mixin SemanticsBinding on BindingBase {
  @override
  void initInstances() {
    super.initInstances();   // 呼叫到 PaintingBinding
    ...
  }
}

D. 再接續會執行 PaintingBinding 類的 initInstances 方法

mixin PaintingBinding on BindingBase, ServicesBinding {
  @override
  void initInstances() {
    super.initInstances();   // 呼叫到 SchedulerBinding
    ...
  }
}  

E. 再接續會執行 SchedulerBinding 類的 initInstances 方法

mixin SchedulerBinding on BindingBase {
  @override
  void initInstances() {
    super.initInstances();   // 呼叫到 SemanticsBinding
    ...
  }
}

F. 再接續會執行 SemanticsBinding 類的 initInstances 方法

mixin GestureBinding on BindingBase implements HitTestable, HitTestDispatcher, HitTestTarget {
  @override
  void initInstances() {
    super.initInstances();   // 最終回到 BindingBase 的 initInstances 方法
    // 執行完 BindingBase 的 initInstances 方法後又回到到這裡繼續執行
    ...


    // 執行完往 SchedulerBinding 回推
  }
}

// widgets/binding.dart

  mixin WidgetsBinding on BindingBase, ServicesBinding, SchedulerBinding, GestureBinding, RendererBinding, SemanticsBinding {
  
      Element? _renderViewElement;
  
      @protected
      void scheduleAttachRootWidget(Widget rootWidget) {    // rootWidget 就是 MyApp Widget
        Timer.run(() {
          attachRootWidget(rootWidget);
        });
      }
      
      
      void attachRootWidget(Widget rootWidget) {
        // 創建 RootWidget 物件實例
        attachToBuildOwner(RootWidget(
          debugShortDescription: '[root]',
          child: rootWidget,
        ));
      }

  }

RendererBinding 類在進行初始化時 renderView 成員，也就是說它會在初始化時被創建，而創建的子類型就是 _ReusableRenderView

// rendering/binding.dart

mixin RendererBinding on BindingBase, ServicesBinding, SchedulerBinding, GestureBinding, SemanticsBinding, HitTestable {
    
  late final RenderView renderView = _ReusableRenderView(
    view: platformDispatcher.implicitView!,
  );
    
}

但這個做法可能在新版本被遺棄，改由 renderViews 管理（因為 RendererBinding 或許需要管理多個 RenderView）

// widgets/binding.dart

  void attachToBuildOwner(RootWidget widget) {
    final bool isBootstrapFrame = rootElement == null;
    
    _readyToProduceFrames = true;
    
    // @ 查看 attach 方法
    _rootElement = widget.attach(buildOwner!, rootElement as RootElement?);
    
    if (isBootstrapFrame) {
      SchedulerBinding.instance.ensureVisualUpdate();
    }
  }

A. 在 attachToBuildOwner 函數中會調用 RootWidget#attach 方法

B. 而在 RootWidget#attach 方法中又會發現它調用了 RootElement#mount 方法，剛方法會把 RootElement 掛載到 Flutter Widget 樹中進行初始化

// widgets/binding.dart

  RootElement attach(BuildOwner owner, [ RootElement? element ]) {
    if (element == null) {
      owner.lockState(() {
        element = createElement();
        assert(element != null);
        element!.assignOwner(owner);
      });
      
      
      owner.buildScope(element!, () {
        // 調用 
        element!.mount(/* parent */ null, /* slot */ null);
      });
    } else {
      element._newWidget = this;
      element.markNeedsBuild();
    }
    return element!;
  }

  RootElement attach(BuildOwner owner, [ RootElement? element ]) {
    if (element == null) {
      owner.lockState(() {
        // 呼叫 createElement 方法，創建 RootElement 物件
        element = createElement();
        assert(element != null);
        element!.assignOwner(owner);
      });
      owner.buildScope(element!, () {
        element!.mount(/* parent */ null, /* slot */ null);
      });
    } else {
      element._newWidget = this;
      element.markNeedsBuild();
    }
    return element!;
  }

並且接下來我們會分析幾個重點

A. RootElement#mount 方法

B. Element#mount 方法

// framework.dart

abstract class Element extends DiagnosticableTree implements BuildContext {

  Element? _parent;
  BuildOwner? _owner;


  @mustCallSuper
  void mount(Element? parent, Object? newSlot) {

    // 判斷生命狀態，必須是初始化
    assert(_lifecycleState == _ElementLifecycle.initial);

    // 判斷 widget 非空，這裡的 widget 就是 RootElement
    assert(widget != null);
    // parent 必須是空
    assert(_parent == null);

    ... 其他斷言

    _parent = parent;    // 將傳進來的第一個參數作為 _parent，第一是傳進來是 null


    _slot = newSlot;

    // 切換到 active 狀態
    _lifecycleState = _ElementLifecycle.active;
    // 紀錄當前樹的深度
    _depth = _parent != null ? _parent!.depth + 1 : 1;


    if (parent != null) {
      // 
      _owner = parent.owner;    // 傳遞父的 owner
    }
    assert(owner != null);
    final Key? key = widget.key;
    if (key is GlobalKey) {
      owner!._registerGlobalKey(key, this);
    }
    _updateInheritance();
  }

}

// widgets/binding.dart

class RootElement extends Element with RootElementMixin {

  @override
  void mount(Element? parent, Object? newSlot) {
    assert(parent == null); // We are the root!
    super.mount(parent, newSlot);
    _rebuild();
    assert(_child != null);
    super.performRebuild(); // clears the "dirty" flag
  }

  ...
}

A. _rebuild() 方法中主要做的事情就是呼叫 Element#updateChild(...) 方法，該方法主要是返回子 Widget 元素

// widgets/binding.dart

  Element? _child;

  void _rebuild() {
    try {
      _child = updateChild(_child, (widget as RootWidget).child, /* slot */ null);
    } catch (exception, stack) {
      ... 省略部分
    }

  }

B. updateChild 函數：這裡我們當成是初次加載，所以在初次呼叫時 _child 成員為 null，透過一些省略… 在帶入 updateChild 函數後我們可以簡化為以下程式來看

// framework.dart

  // 假設帶入的 child 為 null
  Element? updateChild(Element? child, Widget? newWidget, Object? newSlot) {
    ...

    final Element newChild;

    if (child != null) {
       ...
    } else {
      // @ 近一步查看 inflateWidget 方法
      newChild = inflateWidget(newWidget, newSlot);
    }

    ...

    return newChild;
  }

C. inflateWidget 函數：該函數會先判斷 Key 是否是 GlobalKey，如果是 GlobalKey 則呼叫 updateChild 更新… 否則就呼叫 createElement 加載子類的 Element

abstract class Element extends DiagnosticableTree implements BuildContext {

  // newWidget == MyApp
  Element inflateWidget(Widget newWidget, Object? newSlot) {
    ...


    try {
      final Key? key = newWidget.key;

      if (key is GlobalKey) { 

        final Element? newChild = _retakeInactiveElement(key, newWidget);

        if (newChild != null) {
          ...

          // 若是有全域的 Key 則 updateChild
          final Element? updatedChild = updateChild(newChild, newWidget, newSlot);
          assert(newChild == updatedChild);
          return updatedChild!;
        }
      }

      // 若沒有全域的 Key 則呼叫 createElement
      final Element newChild = newWidget.createElement();

      ...

      // 調用 Child 自己的 Element，並且 將自己作為 parent 傳入 (mount 的第一個參數 this)
      newChild.mount(this, newSlot);
      assert(newChild._lifecycleState == _ElementLifecycle.active);

      return newChild;
    } finally {
      if (isTimelineTracked) {
        FlutterTimeline.finishSync();
      }
    }

}

sequenceDiagram
    participant Element
    participant ChildElement
    Element ->> ChildElement: 檢查是否是 GlobalKey
    alt GlobalKey found
        Element ->> Element: _retakeInactiveElement(key, newWidget)
        alt Element retaken
            Element ->> Element: updateChild(newChild, newWidget, newSlot)
            Element ->> Element: Return updatedChild
        end
    else
        Element ->> ChildElement: 呼叫 createElement()
        ChildElement ->> Element: 創建新 Element
        Element ->> Element: 加載到自身
        Element ->> Element: Return newChild
    end

更新 Child 總共有四種狀況，如下表所示

abstract class Element extends DiagnosticableTree implements BuildContext {


  Element? updateChild(Element? child, Widget? newWidget, Object? newSlot) {

    if (newWidget == null) {
      if (child != null)    // 該元素的 Child 不為空
        deactivateChild(child);    // 2. 移除元素的 Child
      return null;    // 1. 返回 null
    }


    final Element newChild;
    if (child != null) {    // 4. 該元素的 Child 不為空
      bool hasSameSuperclass = true;

      ... 斷言

      if (hasSameSuperclass && child.widget == newWidget)     // 創建出來的 Widget 和自身的 Child 相同
        if (child.slot != newSlot)
          updateSlotForChild(child, newSlot);
        newChild = child;    // 返回自己的 Child (省去加載)
      } else if (hasSameSuperclass && Widget.canUpdate(child.widget, newWidget)) {    // cnaUpdate 重點
        if (child.slot != newSlot)
          updateSlotForChild(child, newSlot);
        child.update(newWidget);

        ... 斷言

        newChild = child;
      } else {
        deactivateChild(child);

        ... 斷言

        newChild = inflateWidget(newWidget, newSlot);
      }
    } else {
      // 3. inflateWidget 返回新元素
      newChild = inflateWidget(newWidget, newSlot);    
    }

    ... 斷言

    return newChild;
  }

}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// -------------------------------------------------------------
// framework
abstract class StatelessWidget extends Widget {

  const StatelessWidget({ Key? key }) : super(key: key);

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

}

StatelessElement 對應 StatelessWidget

其反應的順序簡單來說就是 ComponentElement#mount -> _firstBuild -> rebuild -> performRebuild

class StatelessElement extends ComponentElement {
  /// Creates an element that uses the given widget as its configuration.
  StatelessElement(StatelessWidget widget) : super(widget);

  @override
  StatelessWidget get widget => super.widget as StatelessWidget;

  @override
  Widget build() => widget.build(this);      // 把自身傳入也就是 BuildContext

  @override
  void update(StatelessWidget newWidget) {
    super.update(newWidget);
    assert(widget == newWidget);
    _dirty = true;

    // rebuild 最終會呼叫到 build() 方法
    rebuild();
  }
}


abstract class ComponentElement extends Element {

  ComponentElement(Widget widget) : super(widget);

  ...

  Element? _child;

  @override
  void mount(Element? parent, Object? newSlot) {
    super.mount(parent, newSlot);
    assert(_child == null);
    assert(_lifecycleState == _ElementLifecycle.active);
    _firstBuild();
    assert(_child != null);
  }

  void _firstBuild() {
    rebuild();
  }

  @override
  void performRebuild() {


    Widget? built;
    try {    
      built = build();    // MyApp 返回 MaterialApp，透過這個來切換下一個 Widget

      ...
    } catch (e, stack) {

      ...
    } finally {

      ...
    }

    try {
      // 一開始傳入 _child 是 null
      _child = updateChild(_child, built, slot);
      assert(_child != null);
    } catch (e, stack) {
      ...
    }

    ...
  }

}


abstract class Element extends DiagnosticableTree implements BuildContext {

  void rebuild() {
    assert(_lifecycleState != _ElementLifecycle.initial);
    if (_lifecycleState != _ElementLifecycle.active || !_dirty)
      return;

    ...

    performRebuild();
    ...
  }

  @protected
  void performRebuild();
}

從這裡可以看出，Flutter tree 的遍歷以深度為優先，在設計模式看來又是 裝飾模式

A. 裝飾模式：ComponentElement 持有 Element，在透過 ComponentElement#build 來切換下一個子 Widget

B. 責任鏈：都是繼承 Element，並且要實 做 performRebuild 方法