flutter-runApp

2020-06-30

有了前面Widget和Element的基础，现在我们大概可以从runApp方法开始了解一下Flutter的启动流程。

1	void main() => runApp(MyApp());

这是我们初始化Flutter时默认代码，非常简单，就执行了runApp方法，传入我们app的Widget。

void runApp(Widget app) {
  WidgetsFlutterBinding.ensureInitialized()
    ..scheduleAttachRootWidget(app)
    ..scheduleWarmUpFrame();
}

runApp就只有三行代码，我们一个一个看。

static WidgetsBinding ensureInitialized() {
  if (WidgetsBinding.instance == null)
    WidgetsFlutterBinding();
  return WidgetsBinding.instance;
}

ensureInitialized，从名字就可以看出来，是确保这个对象已经初始化了，返回的是一个WidgetsBinding对象，这个名字很熟悉了，上一节讲BuildOwner提到过，BuildOwner是在WidgetsBinding中创建的。现在我们又知道WidgetsBinding是在runApp时就创建的。

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

WidgetsFlutter本身没什么逻辑，但是混入了很多个binding，每个binding都有自己不同的功能，可以单独使用，也可以像WidgetsFlutter一样混合使用。

ensureInitialized返回的是一个WidgetsBinding实例，我们首先看一下WidgetsBinding的创建过程。

1	mixin WidgetsBinding on BindingBase, ServicesBinding, SchedulerBinding, GestureBinding, RendererBinding, SemanticsBinding {}

abstract class BindingBase {
  /// Default abstract constructor for bindings.
  ///
  /// First calls [initInstances] to have bindings initialize their
  /// instance pointers and other state, then calls
  /// [initServiceExtensions] to have bindings initialize their
  /// observatory service extensions, if any.
  BindingBase() {
    developer.Timeline.startSync('Framework initialization');

    assert(!_debugInitialized);
    initInstances();
    assert(_debugInitialized);

    assert(!_debugServiceExtensionsRegistered);
    initServiceExtensions();
    assert(_debugServiceExtensionsRegistered);
    developer.postEvent('Flutter.FrameworkInitialization', <String, String>{});
    developer.Timeline.finishSync();
  }
}

WidgetsBinding继承自BingdingBase，BindingBase的构造函数中调用了initInstance方法来生成一个实例。

// WidgetBinding中的实现
  @override
  void initInstances() {
    super.initInstances();
    _instance = this;

    _buildOwner = BuildOwner();
    buildOwner.onBuildScheduled = _handleBuildScheduled;
    window.onLocaleChanged = handleLocaleChanged;
    window.onAccessibilityFeaturesChanged = handleAccessibilityFeaturesChanged;
    SystemChannels.navigation.setMethodCallHandler(_handleNavigationInvocation);
    FlutterErrorDetails.propertiesTransformers.add(transformDebugCreator);
  }

在这里可以看到，上篇提到的BuildOwner就是在这时候被创建。

接着runApp调用了WidgetsBinding.scheduleAttachRootWidget，并将我们自定义的Widget传入

@protected
void scheduleAttachRootWidget(Widget rootWidget) {
  Timer.run(() {
    attachRootWidget(rootWidget);
  });
}

void attachRootWidget(Widget rootWidget) {
  _readyToProduceFrames = true;
  _renderViewElement = RenderObjectToWidgetAdapter<RenderBox>(
    container: renderView,
    debugShortDescription: '[root]',
    child: rootWidget,
  ).attachToRenderTree(buildOwner, renderViewElement as RenderObjectToWidgetElement<RenderBox>);
}

// RenderObjectToWidgetAdapter.attachToRenderTree
RenderObjectToWidgetElement<T> attachToRenderTree(BuildOwner owner, [ RenderObjectToWidgetElement<T> element ]) {
  if (element == null) {
    owner.lockState(() {
      // createElement() => RenderObjectToWidgetElement<T>(this); -> RootRenderObjectElement -> RenderObjectElement
      element = createElement();
      assert(element != null);
      element.assignOwner(owner);
    });
    owner.buildScope(element, () {
      element.mount(null, null);
    });
    // This is most likely the first time the framework is ready to produce
    // a frame. Ensure that we are asked for one.
    SchedulerBinding.instance.ensureVisualUpdate();
  } else {
    element._newWidget = this;
    element.markNeedsBuild();
  }
  return element;
}

在这里我们可以看到上篇讲到的Element的流程，在attachToRenderTree中通过createElement创建出了Element Tree的根节点，并且将BuildOwner赋值给根节点，此BuildOwner将层层传递下去。

之后调用BuildOwner.buildScope方法，并传入执行根节点mount方法的回调，执行根节点的mount

最后调用scheduleWarmUpFrame去渲染第一帧。

小节

通过对runApp的分析，前面Element的逻辑就更加通畅了，基本了解了从根节点开始的渲染流程。