三棵树的形成

• 代码

    ---->[01/01]----
    void main() {
      runApp(const ColoredBox(color: Colors.red));
    }
    
  <!--more-->

• 源码

  void runApp(Widget app) {
    // 返回一个 WidgetsBinding 对象
    WidgetsFlutterBinding.ensureInitialized()
      // 分析 1
      ..scheduleAttachRootWidget(app)
      // 分析 2
      ..scheduleWarmUpFrame();
  }
  
    static WidgetsBinding ensureInitialized() {
      if (WidgetsBinding._instance == null) {
        // 本身没有构造函数，调用父类构造函数
        WidgetsFlutterBinding();
      }
      return WidgetsBinding.instance;
    }
  
    BindingBase() {
      ...
        //初始化根渲染对象 即 renderview
      initInstances();
      ...
      initServiceExtensions();
      ...
    }

• ..scheduleAttachRootWidget(app)

    // rootWidget 是 runApp 穿进来的 ColorBox
  	@protected
    void scheduleAttachRootWidget(Widget rootWidget) {
      Timer.run(() {
        attachRootWidget(rootWidget);
      });
    }
  
    void attachRootWidget(Widget rootWidget) {
      final bool isBootstrapFrame = renderViewElement == null;
      _readyToProduceFrames = true;
      // _renderViewElement 是根元素节点
      // RenderObjectToWidgetAdapter 是根widget节点
      // 首先构造出了根widget节点 RenderObjectToWidgetAdapter
    	// 再由根 widget 节点的 attachToRenderTree 方法返回了根元素节点
      _renderViewElement = RenderObjectToWidgetAdapter<RenderBox>(
        container: renderView,
        debugShortDescription: '[root]',
        child: rootWidget,
      ).attachToRenderTree(buildOwner!, renderViewElement as RenderObjectToWidgetElement<RenderBox>?);
      if (isBootstrapFrame) {
        SchedulerBinding.instance.ensureVisualUpdate();
      }
    }
  
  // RenderObjectToWidgetAdapter 类及主要方法
  class RenderObjectToWidgetAdapter<T extends RenderObject> extends RenderObjectWidget {
    // 构造函数单纯赋值
    RenderObjectToWidgetAdapter({
      this.child,
      required this.container,
      this.debugShortDescription,
    }) : super(key: GlobalObjectKey(container));
  
    final Widget? child;
  
    final RenderObjectWithChildMixin<T> container;
  
    final String? debugShortDescription;
  
    @override
    RenderObjectToWidgetElement<T> createElement() => RenderObjectToWidgetElement<T>(this);
  
    @override
    RenderObjectWithChildMixin<T> createRenderObject(BuildContext context) => container;
    
    // element ：根节点 现在为null
    // owner ：
    RenderObjectToWidgetElement<T> attachToRenderTree(BuildOwner owner, [ RenderObjectToWidgetElement<T>? element ]) {
      if (element == null) {
        owner.lockState(() {
          // 创建了 RenderObjectToWidgetElement 类型的根元素节点
          element = createElement();
          assert(element != null);
          // 在父类中赋值 _owner = owner;
          element!.assignOwner(owner);
        });
        owner.buildScope(element!, () {
          element!.mount(null, null);
        });
      } else {
        element._newWidget = this;
        element.markNeedsBuild();
      }
      return element!;
    }
  }
  	// 主要执行了 callback 方法，也就是 RenderObjectToWidgetAdapter 类中的 createElement() 方法创建了根元素节点
    void lockState(VoidCallback callback) {
      try {
        callback();
      } finally {
        assert(() {
          _debugStateLockLevel -= 1;
          return true;
        }());
      }
    }
  
  	// 主要执行了 callback 方法，即 element!.mount(null, null); 即 RenderObjectToWidgetElement 的 mount(null, null) 方法来进行节点的挂载
    void buildScope(Element context, [ VoidCallback? callback ]) {
      		try {
            callback();
          } finally {
            assert(() {
              context._debugSetAllowIgnoredCallsToMarkNeedsBuild(false);
              assert(_debugCurrentBuildTarget == context);
              _debugCurrentBuildTarget = debugPreviousBuildTarget;
              _debugElementWasRebuilt(context);
              return true;
            }());
          }
    }
  
  #RenderObjectToWidgetElement.mount(null, null)
    
    @override
    void mount(Element? parent, Object? newSlot) {
      assert(parent == null);
    	// 一直到父类 RenderObjectElement 有 mount 重写
    	// 总结： 1.元素节点 持有了 渲染节点 2.更新了元素树信息和深度等
      super.mount(parent, newSlot);
    	// 
      _rebuild();
      assert(_child != null);
    }
  #RenderObjectElement
    @override
    void mount(Element? parent, Object? newSlot) {
    	// 再到父类 Element
      super.mount(parent, newSlot);
      。。。
      // widget 是 RenderObjectToWidgetElement 构造函数里面的参数，在 RenderObjectToWidgetAdapter 类中传入了 this，即 widget = RenderObjectToWidgetAdapter
      // 即调用了 RenderObjectToWidgetAdapter 中的 createRenderObject 方法并将自己（RenderObjectToWidgetElement）传进去 返回了一个 RenderObjectToWidgetAdapter 中的 container ，即 container = renderview 根渲染对象
      // 此时 RenderObjectToWidgetElement 类型持有了根渲染对象
      _renderObject = (widget as RenderObjectWidget).createRenderObject(this);
     	。。。
      attachRenderObject(newSlot);
      _dirty = false;
    }
  
  	// newSlot = null
  	// 但是由于该节点是根节点，相当于什么都没有执行
  	// 看完此方法，再回到 RenderObjectToWidgetElement的mount方法中接着向下执行
    @override
    void attachRenderObject(Object? newSlot) {
      assert(_ancestorRenderObjectElement == null);
      _slot = newSlot;
      // 从元素树中向上寻找首位 RenderObjectElement 类型的节点，作为先祖节点 _ancestorRenderObjectElement 。
      _ancestorRenderObjectElement = _findAncestorRenderObjectElement();
      // 调用先祖元素节点的 insertRenderObjectChild 方法，将自身持有的 renderObject 对象插入渲染树中。从这里可以看出 渲染树 节点是由 元素 进行维护的
      _ancestorRenderObjectElement?.insertRenderObjectChild(renderObject, newSlot);
      // 通过 _findAncestorParentDataElement 方法，从元素树中向上寻找首位 ParentDataElement<ParentData> 类型的节点。如果非空，执行 _updateParentData 更新渲染对象的 ParentData。
      final ParentDataElement<ParentData>? parentDataElement = _findAncestorParentDataElement();
      if (parentDataElement != null) {
        _updateParentData(parentDataElement.widget as ParentDataWidget<ParentData>);
      }
    }
  #Element
    //主要就是维护一些成员属性信息。
    //对 _parent 属性的赋值表示：这里是树形结构形成的地点。
    //由于这里是根节点，使用父级是 null ；_depth 表示元素的树级深度，父级为空表示根节点，深度为 1 ,如果父级非空，就是父级深度 +1 。其实到这里，就标志着根元素节点的挂载成功。
    void mount(Element? parent, Object? newSlot) {
      _parent = parent;
      _slot = newSlot;
      _lifecycleState = _ElementLifecycle.active;
      _depth = _parent != null ? _parent!.depth + 1 : 1;
      if (parent != null) {
        _owner = parent.owner;
      }
      final Key? key = widget.key;
      if (key is GlobalKey) {
        owner!._registerGlobalKey(key, this);
      }
      _updateInheritance();
      attachNotificationTree();
    }