Flutter路由源码(Navigator原理)详解

Navigator.of(context).pushNamed

用flutter开发界面最离不开的就是路由器，你只要需要跳转到其他界面就需要路由功能，而flutter的ui组成全部都是widget，在布局的时候我们没有用路由的小部件（Navigator），那么它是怎么起到作用的呢，肯定是隐藏在我们用的根部件里面，一般我们布局的根部件为MaterialApp小部件，MaterialApp小部件的build方法构建了WidgetsApp小部件

Widget build(BuildContext context) {
    Widget result = WidgetsApp(
      key: GlobalObjectKey(this),
      navigatorKey: widget.navigatorKey,
      navigatorObservers: _navigatorObservers,
      pageRouteBuilder: (RouteSettings settings, WidgetBuilder builder) {
        return MaterialPageRoute(settings: settings, builder: builder);
      },
.....省略若干行
      }

而WidgetsApp小部件的build的方法会构建Navigator路由小部件，要显示的内容小部件都会成为Navigator的孩子部件，例如home制定小部件会成为Navigator部件的孩子部件，而我们要跳转的操作一般都会用

Navigator.push

Navigator.of(context).pushNamed

等。

 

Widget build(BuildContext context) {
    Widget navigator;
    if (_navigator != null) {
      navigator = Navigator(
        key: _navigator,
        // If window.defaultRouteName isn't '/', we should assume it was set
        // intentionally via `setInitialRoute`, and should override whatever
        // is in [widget.initialRoute].
        initialRoute: WidgetsBinding.instance.window.defaultRouteName != Navigator.defaultRouteName
            ? WidgetsBinding.instance.window.defaultRouteName
            : widget.initialRoute ?? WidgetsBinding.instance.window.defaultRouteName,
        onGenerateRoute: _onGenerateRoute,
        onUnknownRoute: _onUnknownRoute,
        observers: widget.navigatorObservers,
      );
    }
.....省略若干行
}

 

而Navigator小部件的的build方法则最终由Overlay来显示路由的界面

 Widget build(BuildContext context) {
    assert(!_debugLocked);
    assert(_history.isNotEmpty);
    return Listener(
      onPointerDown: _handlePointerDown,
      onPointerUp: _handlePointerUpOrCancel,
      onPointerCancel: _handlePointerUpOrCancel,
      child: AbsorbPointer(
        absorbing: false, // it's mutated directly by _cancelActivePointers above
        child: FocusScope(
          node: focusScopeNode,
          autofocus: true,
          child: Overlay(
            key: _overlayKey,
            initialEntries: _initialOverlayEntries,
          ),
        ),
      ),
    );
  }

而Overlay小部件又通过路由器存储了多少个界面将界面以_OverlayEntry小部件的形式加入到onstageChildren（需要绘制的路由） 集合中，而offstageChildren 是不需要绘制的小部件集合。

Widget build(BuildContext context) {
    // These lists are filled backwards. For the offstage children that
    // does not matter since they aren't rendered, but for the onstage
    // children we reverse the list below before adding it to the tree.
    final List onstageChildren = [];
    final List offstageChildren = [];
    bool onstage = true;
    for (int i = _entries.length - 1; i >= 0; i -= 1) {
      final OverlayEntry entry = _entries[i];
      if (onstage) {
        onstageChildren.add(_OverlayEntry(entry));
//如果不透明的话，下面的布局不用显示了
        if (entry.opaque)
          onstage = false;
      } else if (entry.maintainState) {
//不需要渲染的路由小部件
        offstageChildren.add(TickerMode(enabled: false, child: _OverlayEntry(entry)));
      }
    }
    return _Theatre(
      onstage: Stack(
        fit: StackFit.expand,
        children: onstageChildren.reversed.toList(growable: false),
      ),
      offstage: offstageChildren,
    );
  }

通俗的说就是你的MaterialApp的home属性显示的就是当前的路由界面，如果你需要跳转到路由B界面的话，B界面会显示在home界面的上面，也就是说把home界面当做路由A，路由B界面会显示在A界面上面，所以A界面就被B界面覆盖了，从而起到了跳转的作用，这是因为路由A界面和路由B界面的父部件是Stack（和帧布局类似）。

接下来来看一下默认的第一个路由界面的获取，这个获取是在Navigator的State的initState方法里面实现的

void initState() {
    super.initState();
    for (NavigatorObserver observer in widget.observers) {
      assert(observer.navigator == null);
      observer._navigator = this;
    }
    String initialRouteName = widget.initialRoute ?? Navigator.defaultRouteName;
    if (initialRouteName.startsWith('/') && initialRouteName.length > 1) {
      initialRouteName = initialRouteName.substring(1); // strip leading '/'
      assert(Navigator.defaultRouteName == '/');
      final List> plannedInitialRoutes = >[
        _routeNamed(Navigator.defaultRouteName, allowNull: true, arguments: null),
      ];
      final List routeParts = initialRouteName.split('/');
      if (initialRouteName.isNotEmpty) {
        String routeName = '';
        for (String part in routeParts) {
          routeName += '/$part';
          plannedInitialRoutes.add(_routeNamed(routeName, allowNull: true, arguments: null));
        }
      }
      if (plannedInitialRoutes.last == null) {
       
        push(_routeNamed