Flutter 的 runApp 与三棵树诞生流程源码分析

/**
 * 位置：FLUTTER_SDK\packages\flutter\lib\src\widgets\binding.dart
 * 注意：app参数的Widget布局盒子约束constraints会被强制为填充屏幕，这是框架机制，自己想要调整可以用Align等包裹。
 * 多次重复调用runApp将会从屏幕上移除已添加的app Widget并添加新的上去，
 * 框架会对新的Widget树与之前的Widget树进行比较，并将任何差异应用于底层渲染树，有点类似于StatefulWidget
调用State.setState后的重建机制。
 */
void runApp(Widget app) {
  WidgetsFlutterBinding.ensureInitialized()
    ..scheduleAttachRootWidget(app)
    ..scheduleWarmUpFrame();
}

class WidgetsFlutterBinding extends BindingBase with GestureBinding, SchedulerBinding, ServicesBinding, PaintingBinding, SemanticsBinding, RendererBinding, WidgetsBinding {
  static WidgetsBinding ensureInitialized() {
    if (WidgetsBinding.instance == null)
      WidgetsFlutterBinding();
    return WidgetsBinding.instance!;
  }
}

mixin WidgetsBinding on BindingBase, ServicesBinding, SchedulerBinding, GestureBinding, RendererBinding, SemanticsBinding {
  @override
  void initInstances() {
    ......
    /**
     *1、创建一个管理Widgets的类对象
     *BuildOwner类用来跟踪哪些Widget需要重建，并处理用于Widget树的其他任务，例如管理不活跃的Widget等，调试模式触发重建等。
     */
    _buildOwner = BuildOwner();
    //2、回调方法赋值，当第一个可构建元素被标记为脏时调用。
    buildOwner!.onBuildScheduled = _handleBuildScheduled;
    //3、回调方法赋值，当本地配置变化或者AccessibilityFeatures变化时调用。
    window.onLocaleChanged = handleLocaleChanged;
    window.onAccessibilityFeaturesChanged = handleAccessibilityFeaturesChanged;
    ......
  }
}

mixin RendererBinding on BindingBase, ServicesBinding, SchedulerBinding, GestureBinding, SemanticsBinding, HitTestable {
  @override
  void initInstances() {
    ......
    /**
     * 4、创建管理rendering渲染管道的类
     * 提供接口调用用来触发渲染。
     */
    _pipelineOwner = PipelineOwner(
      onNeedVisualUpdate: ensureVisualUpdate,
      onSemanticsOwnerCreated: _handleSemanticsOwnerCreated,
      onSemanticsOwnerDisposed: _handleSemanticsOwnerDisposed,
    );
    //5、一堆window变化相关的回调监听
    window
      ..onMetricsChanged = handleMetricsChanged
      ..onTextScaleFactorChanged = handleTextScaleFactorChanged
      ..onPlatformBrightnessChanged = handlePlatformBrightnessChanged
      ..onSemanticsEnabledChanged = _handleSemanticsEnabledChanged
      ..onSemanticsAction = _handleSemanticsAction;
    //6、创建RenderView对象，也就是RenderObject渲染树的根节点
    initRenderView();
    ......
  }

  void initRenderView() {
    ......
    //RenderView extends RenderObject with RenderObjectWithChildMixin<RenderBox>
    //7、渲染树的根节点对象
    renderView = RenderView(configuration: createViewConfiguration(), window: window);
    renderView.prepareInitialFrame();
  }
  //定义renderView的get方法，获取自_pipelineOwner.rootNode
  RenderView get renderView => _pipelineOwner.rootNode! as RenderView;
  //定义renderView的set方法，上面initRenderView()中实例化赋值就等于给_pipelineOwner.rootNode也进行了赋值操作。
  set renderView(RenderView value) {
    assert(value != null);
    _pipelineOwner.rootNode = value;
  }
}

mixin WidgetsBinding on BindingBase, ServicesBinding, SchedulerBinding, GestureBinding, RendererBinding, SemanticsBinding {
  @protected
  void scheduleAttachRootWidget(Widget rootWidget) {
  	//简单的异步快速执行，将attachRootWidget异步化
    Timer.run(() {
      attachRootWidget(rootWidget);
    });
  }

  void attachRootWidget(Widget rootWidget) {
  	//1、是不是启动帧，即看renderViewElement是否有赋值，赋值时机为步骤2
    final bool isBootstrapFrame = renderViewElement == null;
    _readyToProduceFrames = true;
    //2、桥梁创建RenderObject、Element、Widget关系树，_renderViewElement值为attachToRenderTree方法返回值
    _renderViewElement = RenderObjectToWidgetAdapter<RenderBox>(
      //3、RenderObjectWithChildMixin类型，继承自RenderObject，RenderObject继承自AbstractNode。
      //来自RendererBinding的_pipelineOwner.rootNode，_pipelineOwner来自其初始化initInstances方法实例化的PipelineOwner对象。
      //一个Flutter App全局只有一个PipelineOwner实例。
      container: renderView, 
      debugShortDescription: '[root]',
      //4、我们平时写的dart Widget app
      child: rootWidget,
    //5、attach过程，buildOwner来自WidgetsBinding初始化时实例化的BuildOwner实例，renderViewElement值就是_renderViewElement自己，此时由于调用完appach才赋值，所以首次进来也是null。
    ).attachToRenderTree(buildOwner!, renderViewElement as RenderObjectToWidgetElement<RenderBox>?);
    if (isBootstrapFrame) {
      //6、首帧主动更新一下，匹配条件的情况下内部本质是调用SchedulerBinding的scheduleFrame()方法。
      //进而本质调用了window.scheduleFrame()方法。
      SchedulerBinding.instance!.ensureVisualUpdate();
    }
  }
}

//1、RenderObjectToWidgetAdapter继承自RenderObjectWidget，RenderObjectWidget继承自Widget
class RenderObjectToWidgetAdapter<T extends RenderObject> extends RenderObjectWidget {
  ......
  //3、我们编写dart的runApp函数参数中传递的Flutter应用Widget树根
  final Widget? child;
  //4、继承自RenderObject，来自PipelineOwner对象的rootNode属性，一个Flutter App全局只有一个PipelineOwner实例。
  final RenderObjectWithChildMixin<T> container;
  ......
  //5、重写Widget的createElement实现，构建了一个RenderObjectToWidgetElement实例，它继承于Element。	     		
  //Element树的根结点是RenderObjectToWidgetElement。
  @override
  RenderObjectToWidgetElement<T> createElement() => RenderObjectToWidgetElement<T>(this);
  //6、重写Widget的createRenderObject实现，container本质是一个RenderView。
  //RenderObject树的根结点是RenderView。
  @override
  RenderObjectWithChildMixin<T> createRenderObject(BuildContext context) => container;

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

  /**
   *7、上面代码片段中RenderObjectToWidgetAdapter实例创建后调用
   *owner来自WidgetsBinding初始化时实例化的BuildOwner实例，element 值就是自己。
   *该方法创建根Element(RenderObjectToWidgetElement)，并将Element与Widget进行关联，即创建WidgetTree对应的ElementTree。
   *如果Element已经创建过则将根Element中关联的Widget设为新的(即_newWidget)。
   *可以看见Element只会创建一次，后面都是直接复用的。
   */
  RenderObjectToWidgetElement<T> attachToRenderTree(BuildOwner owner, [ RenderObjectToWidgetElement<T>? element ]) {
    //8、由于首次实例化RenderObjectToWidgetAdapter调用attachToRenderTree后才不为null，所以当前流程为null
    if (element == null) {
      //9、在lockState里面代码执行过程中禁止调用setState方法
      owner.lockState(() {
        //10、创建一个Element实例，即调用本段代码片段中步骤5的方法。
        //调用RenderObjectToWidgetAdapter的createElement方法构建了一个RenderObjectToWidgetElement实例，继承RootRenderObjectElement，又继续继承RenderObjectElement，接着继承Element。
        element = createElement();
        assert(element != null);
        //11、给根Element的owner属性赋值为WidgetsBinding初始化时实例化的BuildOwner实例。
        element!.assignOwner(owner);
      });
      //12、重点！mount里面RenderObject 
      owner.buildScope(element!, () {
        element!.mount(null, null);
      });
    } else {
      //13、更新widget树时_newWidget赋值为新的，然后element数根标记为markNeedsBuild
      element._newWidget = this;
      element.markNeedsBuild();
    }
    return element!;
  }
  ......
}

abstract class RenderObjectElement extends Element {
  //1、Element树通过构造方法RenderObjectToWidgetElement持有了Widget树实例。（RenderObjectToWidgetAdapter）。
  @override
  RenderObjectWidget get widget => super.widget as RenderObjectWidget;

  //2、Element树通过mount后持有了RenderObject渲染树实例。
  @override
  RenderObject get renderObject => _renderObject!;
  RenderObject? _renderObject;

  @override
  void mount(Element? parent, Object? newSlot) {
    ......
    //3、通过widget树（即RenderObjectToWidgetAdapter）调用createRenderObject方法传入Element实例自己获取RenderObject渲染树。
    //RenderObjectToWidgetAdapter.createRenderObject(this)返回的是RenderObjectToWidgetAdapter的container成员，也就是上面分析的RenderView渲染树根节点。
    _renderObject = widget.createRenderObject(this);
    ......
  }
}

mixin SchedulerBinding on BindingBase {
  void scheduleWarmUpFrame() {
    ......
    Timer.run(() {
      assert(_warmUpFrame);
      handleBeginFrame(null);
    });
    Timer.run(() {
      assert(_warmUpFrame);
      handleDrawFrame();
      //重置时间戳，避免热重载情况从热身帧到热重载帧的时间差，导致隐式动画的跳帧情况。
      resetEpoch();
      ......
      if (hadScheduledFrame)
        scheduleFrame();
    });
	//在此次绘制结束前该方法会锁定事件分发，可保证绘制过程中不会再触发新重绘。
	//也就是说在本次绘制结束前不会响应各种事件。
    lockEvents(() async {
      await endOfFrame;
      Timeline.finishSync();
    });
  }
}