Flutter Navigator2.0的原理和Web端实践-51CTO.COM

1.背景与动机

在Navigator 2.0推出之前，Flutter主要通过Navigator 1.0和其提供的 API（如push(), pop(), pushNamed()等）来管理页面路由。然而，Navigator 1.0存在一些局限性，如难以实现复杂的页面操作（如移除栈内中间页面、交换页面等）、不支持嵌套路由以及无法满足全平台（尤其是Web平台）的新需求。因此，Flutter官方团队决定对路由系统进行改造，推出了Navigator 2.0。

2.主要特性

声明式API Navigator 2.0提供的声明式API使得路由管理更加直观和易于理解。开发者只需声明页面的配置信息，而无需编写复杂的导航逻辑代码。这种方式不仅减少了代码量，还提高了代码的可读性和可维护性。
嵌套路由 Navigator 2.0满足了嵌套路由的需求场景，允许开发者在应用中创建嵌套的路由结构。这使得应用的结构更加清晰，同时也提高了页面导航的灵活性。
全平台支持 Navigator 2.0提供的API能够满足不同平台（如iOS、Android、Web等）的导航需求，使得开发者能够更加方便地构建跨平台的应用。
强大的页面操作能力 Navigator 2.0提供了更加丰富的页面操作能力，如移除栈内中间页面、交换页面等。这些操作在Navigator 1.0中很难实现或需要编写复杂的代码，而在Navigator 2.0中则变得简单直接。

3.核心组件

Router 在Navigator 2.0中，Router组件是路由管理的核心。它负责根据当前的路由信息（RouteInformation）和路由信息解析器（RouteInformationParser）来构建和更新UI。Router组件接收三个主要参数：1.routeInformationProvider：提供当前的路由信息；2.routeInformationParser：将路由信息解析为路由配置；3.routerDelegate：根据路由配置构建和更新UI。
RouteInformationProvider RouteInformationProvider是一个提供当前路由信息的组件。它通常与平台相关的路由信息源（如浏览器的URL、Android的Intent等）集成，以获取当前的路由信息。
RouteInformationParser RouteInformationParser负责将RouteInformation解析为RouteConfiguration。这个过程允许开发者根据路由信息的格式（如URL）来定义如何将其映射到应用内的路由配置。
RouterDelegate RouterDelegate是与UI构建紧密相关的组件。它必须实现RouterDelegate接口，并提供两个主要方法： 1.build(BuildContext context)：根据当前的路由配置构建UI；2.setNewRoutePath(List configuration)：设置新的路由路径，并更新UI；3.Future popRoute() ：实现后退逻辑。

4.简单实例

首先通过MaterialApp.router()来创建MaterialApp:

class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    final routerDelegate = MyRouterDelegate();  
    final routeInformationParser = MyRouteInformationParser();  
  
    return MaterialApp.router(  
      title: 'Flutter Navigator 2.0 Demo',  
      theme: ThemeData(  
        primarySwatch: Colors.blue,  
      ),  
      routerDelegate: routerDelegate,  
      routeInformationParser: routeInformationParser,  
    );  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

需要定义一个RouterDelegate对象和一个RouteInformationParser对象。其中根据路由配置构建和更新UI，RouteInformationParser负责将RouteInformation解析为RouteConfiguration。 RouterDelegate可以传个泛型，定义其currentConfiguration对象的类型。

class MyRouterDelegate extends RouterDelegate<String>  
  with PopNavigatorRouterDelegateMixin<String>, ChangeNotifier {  
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();  
  private List<String> _pages = ['/home'];  
  
  @override  
  Widget build(BuildContext context) {  
    return Navigator(  
      key: navigatorKey,  
      pages: _pages.map((route) => MaterialPage(  
        key: Key(route),  
        child: generatePage(route),  
      )).toList(),  
      onPopPage: (route, result) {  
        if (!route.didPop(result)) {  
          return false;  
        }  
  
        _pages.removeLast();  
        notifyListeners();  
        return true;  
      },  
    );  
  }  
  
  @override  
  Future<void> setNewRoutePath(String path) async {  
    if (!_pages.contains(path)) {  
      _pages.add(path);  
      notifyListeners();  
    }  
  }  
  
  Widget generatePage(String route) {  
    switch (route) {  
      case '/home':  
        return HomePage();  
      case '/details':  
        // 这里可以传递参数，例如 DetailsPage(arguments: someData)  
        return DetailsPage();  
      default:  
        return NotFoundPage();  
    }  
  }  
  
  @override  
  String get currentConfiguration => _pages.last;  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.

其中build()一般返回的是一个Navigator对象，popRoute()实现后退逻辑，setNewRoutePath()实现新页面的逻辑。定义了一个_pages数组对象，记录每个路由的path，可以理解为是一个路由栈，这个路由栈对我们来说非常友好，在有复杂的业务逻辑时，我们可以自行定义相应的栈管理逻辑。currentConfiguration返回的是栈顶的page信息。创建一个类继承RouteInformationParser，主要的作用是包装解析路由信息，这里有一个最简单的方式，如下：

class MyRouteInformationParser extends RouteInformationParser<String> {  
  @override  
  Future<String> parseRouteInformation(RouteInformation routeInformation) {  
    final uri = Uri.parse(routeInformation.location);  
    return SynchronousFuture(uri.path);  
  }  
  
  @override  
  RouteInformation restoreRouteInformation(String configuration) {  
    return RouteInformation(location: configuration);  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

好的，接下来我们看一下调用：

class HomePage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(title: Text('Home')),  
      body: Center(  
        child: ElevatedButton(  
          onPressed: () {  
            Router.of(context).routerDelegate.setNewRoutePath("/details");
          },  
          child: Text('Go to Details'),  
        ),  
      ),  
    );  
  }  
}  
  
class DetailsPage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(title: Text('Details')),  
      body: Center(  
        child: Text('This is Details Page'),  
      ),  
    );  
  }  
} 

class NotFoundPage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(title: Text('Not Found')),  
      body: Center(  
        child: Text('Page not found'),  
      ),  
    );  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.

非常简单，直接调用Router.of(context).routerDelegate.setNewRoutePath()即可。

到此为止，一个使用Navigator2.0的最简单的路由实例就完成了。和Navigator1.0相比，看上去繁杂了不少。但是可以根据业务需求自定义路由栈进行管理，大大的提升了灵活性。接来看我们看一下Navigator2.0是如何对路由进行实现的。

5.源码简析

我们在使用Navigator2.0时，是通过MaterialApp.router()创建的MaterialApp对象，之前章节提到过，传了RouteInformationParser和RouterDelegate这两个对象。当传递了RouterDelegate对象时，_MaterialAppState中的_usesRouter会被设置为true。

bool get _usesRouter => widget.routerDelegate != null || widget.routerConfig != null;1.

在build()时，通过WidgetsApp.router()方法创建了一个WidgetsApp对象：

if (_usesRouter) {
      return WidgetsApp.router(
        key: GlobalObjectKey(this),
        routeInformationProvider: widget.routeInformationProvider,
        routeInformationParser: widget.routeInformationParser,
        routerDelegate: widget.routerDelegate,
        routerConfig: widget.routerConfig,
        backButtonDispatcher: widget.backButtonDispatcher,
        builder: _materialBuilder,
        title: widget.title,
        onGenerateTitle: widget.onGenerateTitle,
        textStyle: _errorTextStyle,
        color: materialColor,
        locale: widget.locale,
        localizationsDelegates: _localizationsDelegates,
        localeResolutionCallback: widget.localeResolutionCallback,
        localeListResolutionCallback: widget.localeListResolutionCallback,
        supportedLocales: widget.supportedLocales,
        showPerformanceOverlay: widget.showPerformanceOverlay,
        checkerboardRasterCacheImages: widget.checkerboardRasterCacheImages,
        checkerboardOffscreenLayers: widget.checkerboardOffscreenLayers,
        showSemanticsDebugger: widget.showSemanticsDebugger,
        debugShowCheckedModeBanner: widget.debugShowCheckedModeBanner,
        inspectorSelectButtonBuilder: _inspectorSelectButtonBuilder,
        shortcuts: widget.shortcuts,
        actions: widget.actions,
        restorationScopeId: widget.restorationScopeId,
      );
    }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

在_WidgetsAppState中根据routerDelegate设置了成员变量_usesRouterWithDelegates的值：

bool get _usesRouterWithDelegates => widget.routerDelegate != null;1.

在build()时会创建一个Router对象，其中Router继承了StatefulWidget：

@override
  Widget build(BuildContext context) {
    Widget? routing;
    if (_usesRouterWithDelegates) {
      routing = Router<Object>(
        restorationScopeId: 'router',
        routeInformationProvider: _effectiveRouteInformationProvider,
        routeInformationParser: widget.routeInformationParser,
        routerDelegate: widget.routerDelegate!,
        backButtonDispatcher: _effectiveBackButtonDispatcher,
      );
    } 
......
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

在上一章节的实例中我们可得知，页面的切换都是依靠RouterDelegate对象进行的。每当切换到新的页面时，都会调用setNewRoutePath()方法，因此我们来看一下setNewRoutePath()是什么时候被调用的，有两处。第一处：

void _handleRouteInformationProviderNotification() {
    _routeParsePending = true;
    _processRouteInformation(widget.routeInformationProvider!.value, () => widget.routerDelegate.setNewRoutePath);
  }1.
2.
3.
4.

_RouteSetter<T> _processParsedRouteInformation(Object? transaction, ValueGetter<_RouteSetter<T>> delegateRouteSetter) {
    return (T data) async {
      if (_currentRouterTransaction != transaction) {
        return;
      }
      await delegateRouteSetter()(data);
      if (_currentRouterTransaction == transaction) {
        _rebuild();
      }
    };
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

我们看看_handleRouteInformationProviderNotification的调用时机：

@override
  void initState() {
    super.initState();
    widget.routeInformationProvider?.addListener(_handleRouteInformationProviderNotification);
    widget.backButtonDispatcher?.addCallback(_handleBackButtonDispatcherNotification);
    widget.routerDelegate.addListener(_handleRouterDelegateNotification);
  }1.
2.
3.
4.
5.
6.
7.

我们可以看到在initState()时，也就是在Router被初始化的时候由widget.routeInformationProvider来监听一些状态实现新页面的切换。我们来看一下routeInformationProvider。RouteInformationProvider在我们自己没有创建的情况下，系统会默认为我们创建一个PlatformRouteInformationProvider对象。它实际上是个ChangeNotifier。系统会监听每一帧的信号发送，调用其父类routerReportsNewRouteInformation()方法，我们看看它的实现：

@override
  void routerReportsNewRouteInformation(RouteInformation routeInformation, {RouteInformationReportingType type = RouteInformationReportingType.none}) {
    final bool replace =
      type == RouteInformationReportingType.neglect ||
      (type == RouteInformationReportingType.none &&
      _equals(_valueInEngine.uri, routeInformation.uri));
    SystemNavigator.selectMultiEntryHistory();
    SystemNavigator.routeInformationUpdated(
      uri: routeInformation.uri,
      state: routeInformation.state,
      replace: replace,
    );
    _value = routeInformation;
    _valueInEngine = routeInformation;
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

其中SystemNavigator.selectMultiEntryHistory()的实现如下：

/// Selects the multiple-entry history mode.
  ///
  /// On web, this switches the browser history model to one that tracks all
  /// updates to [routeInformationUpdated] to form a history stack. This is the
  /// default.
  ///
  /// Currently, this is ignored on other platforms.
  ///
  /// See also:
  ///
  ///  * [selectSingleEntryHistory], which forces the history to only have one
  ///    entry.
  static Future<void> selectMultiEntryHistory() {
    return SystemChannels.navigation.invokeMethod<void>('selectMultiEntryHistory');
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

这个方法是由各个平台自行实现的。从注释中我们可得知如果是在Web平台下，它会切换成history模式，并从history stack中追踪所有的变化。在history发生变化时，会发送信号给Flutter层等待处理。SystemNavigator.routeInformationUpdated()方法是用来更新路由的，我们先不做分析。接着我们回到PlatformRouteInformationProvider，看看它什么时候会执行notifyListeners()方法：

@override
  Future<bool> didPushRouteInformation(RouteInformation routeInformation) async {
    assert(hasListeners);
    _platformReportsNewRouteInformation(routeInformation);
    return true;
  }1.
2.
3.
4.
5.
6.

void _platformReportsNewRouteInformation(RouteInformation routeInformation) {
    if (_value == routeInformation) {
      return;
    }
    _value = routeInformation;
    _valueInEngine = routeInformation;
    notifyListeners();
  }1.
2.
3.
4.
5.
6.
7.
8.

在监听到有push路由的情况下时，会调用notifyListeners()，从而实现页面的切换。我们再来看第二处调用setNewRoutePath()的地方：

@override
  void didChangeDependencies() {
    _routeParsePending = true;
    super.didChangeDependencies();
    // The super.didChangeDependencies may have parsed the route information.
    // This can happen if the didChangeDependencies is triggered by state
    // restoration or first build.
    if (widget.routeInformationProvider != null && _routeParsePending) {
      _processRouteInformation(widget.routeInformationProvider!.value, () => widget.routerDelegate.setNewRoutePath);
    }
    _routeParsePending = false;
    _maybeNeedToReportRouteInformation();
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

void _processRouteInformation(RouteInformation information, ValueGetter<_RouteSetter<T>> delegateRouteSetter) {
    assert(_routeParsePending);
    _routeParsePending = false;
    _currentRouterTransaction = Object();
    widget.routeInformationParser!
      .parseRouteInformationWithDependencies(information, context)
      .then<void>(_processParsedRouteInformation(_currentRouterTransaction, delegateRouteSetter));
  }1.
2.
3.
4.
5.
6.
7.
8.

parseRouteInformationWithDependencies()方法中调用的parseRouteInformation()其实就是我们自定义RouteInformationParser来进行的实现。

Future<T> parseRouteInformationWithDependencies(RouteInformation routeInformation, BuildContext context) {
    return parseRouteInformation(routeInformation);
  }1.
2.
3.

看到当其与父的依赖关系被改变的时候会调用setNewRoutePath()。大概率就是App初始化的时候被调用一次。

6.根据狐友业务的Web端实践

我们的Flutter团队会承担一些运营活动的H5需求。在实现时我们对路由有如下需求：

可以根据业务自由的管理路由栈；
分享链接只能分享出去默认入口链接，不希望中间的路由链接被分享出去；
不管有多少个路由页面，history始终不变，在响应浏览器返回键时不响应路由栈的pop操作。

在之前使用Navigator1.0时体验并不太好，一个是不够灵活，另外还需对分享出去的链接做处理。因此我们利用Navigator2.0设计了一套新的路由：

MyRouterDelegate delegate = MyRouterDelegate();

  @override
  Widget build(BuildContext context) {
     return MaterialApp.router(
        debugShowCheckedModeBanner: false,
        routeInformationParser: MyRouteParser(),
        routerDelegate: delegate,
      );
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

Parser实现非常简单：

class MyRouteParser extends RouteInformationParser<RouteSettings> {
  @override
  ///parseRouteInformation() 方法的作用就是接受系统传递给我们的路由信息 routeInformation
  Future<RouteSettings> parseRouteInformation(
      RouteInformation routeInformation) {
    // Uri uri = Uri.parse(routeInformation.location??"/");
    return SynchronousFuture(RouteSettings(name: routeInformation.location));
  }

  @override
  ///恢复路由信息
  RouteInformation restoreRouteInformation(RouteSettings configuration) {
    return RouteInformation(location: configuration.name);
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

Delegate的实现如下：

import 'package:ai_chatchallenge/router/exit_util.dart';
import 'package:ai_chatchallenge/router/navigator_util.dart';
import 'package:ai_chatchallenge/router/my_router_arg.dart';
import 'package:flutter/material.dart';

import 'route_page_config.dart';

class MyRouterDelegate extends RouterDelegate<RouteSettings>
    with PopNavigatorRouterDelegateMixin<RouteSettings>, ChangeNotifier {
  ///页面栈
  List<Page> _stack = [];

  //当前的界面信息
  RouteSettings _setting = RouteSettings(
      name: RouterName.rootPage,
      arguments: BaseArgument()..name = RouterName.rootPage);

  //重写navigatorKey
  @override
  GlobalKey<NavigatorState> navigatorKey;

  MyRouterDelegate() : navigatorKey = GlobalKey<NavigatorState>() {
    //初始化两个方法 一个是push页面 另一个是替换页面

    NavigatorUtil()
        .registerRouteJump(RouteJumpFunction(onJumpTo: (RouteSettings setting) {
      // _setting = setting;
      // changePage();
      addPage(name: setting.name, arguments: setting.arguments);
    }, onReplaceAndJumpTo: (RouteSettings setting) {
      if (_stack.isNotEmpty) {
        _stack.removeLast();
      }
      _setting = setting;
      changePage();
    }, onClearStack: () {
      _stack.clear();
      _setting = RouteSettings(
          name: RouterName.rootPage,
          arguments: BaseArgument()..name = RouterName.rootPage);
      changePage();
    }, onBack: () {
      if (_stack.isNotEmpty) {
        _stack.removeLast();
        if (_stack.isNotEmpty) {
          _setting = _stack.last;
        } else {
          _setting = RouteSettings(
              name: RouterName.rootPage,
              arguments: BaseArgument()..name = RouterName.rootPage);
        }

        changePage();
      }
    }));
  }

  @override
  RouteSettings? get currentConfiguration {
    return _stack.last;
  }

  @override
  Future<bool> popRoute() {
    if (_stack.length > 1) {
      _stack.removeLast();
      _setting = _stack.last;
      changePage();
      //非最后一个页面
      return Future.value(true);
    }
    //最后一个页面确认退出操作
    return _confirmExit();
  }

  Future<bool> _confirmExit() async {
    bool result = ExitUtil.doubleCheckExit(navigatorKey.currentContext!);
    // bool result = await ExitUtil.backToDesktop();
    return !result;
  }

  void addPage({required name, arguments}) {
    _setting = RouteSettings(name: name, arguments: arguments);
    changePage();
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      //解决物理返回建无效的问题
      onWillPop: () async => !await navigatorKey.currentState!.maybePop(),
      child: Navigator(
        key: navigatorKey,
        pages: _stack,
        onPopPage: _onPopPage,
      ),
    );
  }

  /// 按下返回的回调
  bool _onPopPage(Route<dynamic> route, dynamic result) {
    debugPrint("这里的试试");
    if (!route.didPop(result)) {
      return false;
    }
    return true;
  }

  changePage() {
    int index = getCurrentIndex(_stack, _setting!);
    List<Page> tempPages = _stack;

    if (index != -1) {
      // 要求栈中只允许有一个同样的页面的实例 否则开发模式热更新会报错
      // 要打开的页面在栈中已存在，则将该页面和它上面的所有页面进行出栈
      tempPages = tempPages.sublist(0, index);
      // 或者删除之前存在栈里的页面,重新创建
      // tempPages.removeAt(index);
    }
    Page page;

    if (_setting?.arguments is BaseArgument) {
      if ((_setting?.arguments as BaseArgument).name == RouterName.rootPage) {
        _stack.clear();
      }
    } else {
      if (_setting?.name == RouterName.rootPage) {
        _stack.clear();
      }
    }
    page = buildPage(name: _setting?.name, arguments: _setting?.arguments);
    tempPages = [...tempPages, page];
    NavigatorUtil().notify(tempPages, _stack);

    _stack = tempPages;
    notifyListeners();
  }

  @override
  Future<void> setInitialRoutePath(RouteSettings configuration) {
    return super.setInitialRoutePath(_setting);
  }

  @override
  Future<void> setNewRoutePath(RouteSettings configuration) async {
    if (configuration.arguments is BaseArgument) {
      if ((configuration.arguments as BaseArgument).name ==
          RouterName.rootPage) {
        _stack.clear();
      }
    } else {
      if (configuration.name == RouterName.rootPage) {
        _stack.clear();
      }
    }
    addPage(name: configuration.name, arguments: configuration.arguments);
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.

其中_stack是我们的路由栈，_setting是RouteSettings，每执行一个新的路由跳转，都会创建一个RouteSettings对象并赋值给_setting，最终在插入_stack里。buildPage()的实现如下：

//建造页面
buildPage({required name, arguments}) {
  return MaterialPage(
      child: getPageChild(name: name, arguments: arguments),
      arguments: arguments,
      name: name,
      key: ValueKey(
          arguments is BaseArgument ? (arguments as BaseArgument).name : name));
}1.
2.
3.
4.
5.
6.
7.
8.
9.

其中MaterialPage继承了Page。getPageChild()实现如下：

Widget getPageChild({required name, arguments}) {
  Widget page;
  Map? arg;
  if (arguments is Map) {
    arg = arguments;
  }
  if (arguments is BaseArgument) {
    switch ((arguments as BaseArgument).name) {
      case RouterName.rootPage:
        page = TestHomePage();
        break;
      case RouterName.testChild1Page:
        page = TestChildPage1(
          argument: arguments.arguments as TestChild1PageArgument,
        );
        break;
      case RouterName.testChild2Page:
        page = TestChildPage2();
        break;
      default:
        page = TestHomePage();
    }
  } else {
    page = TestHomePage();
  }

  return page;
}

class RouterName {
  static const rootPage = "/";
  static const testChild1Page = "/testChild1Page";
  static const testChild2Page = "/testChild2Page";
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

我们可以看到，在真正返回Widget时，我们并没有使用传入的name参数，而是BaseArgument的name参数，这是为什么呢？这是在于我们为了实现无论页面怎么跳转，从头到尾浏览器只保留一个history，因此我们在页面跳转时RouteSettings的name并不发生变化，通过其arguments里面的参数变化返回不同的Widget。这样在路由跳转时，其实MaterialPage由于name一直会被直接复用，从而不会创建新的MaterialPage也就不会产生history。 NavigatorUtil是由业务调用的，创建跳转方法的抽象类，提供了onJumpTo()，onReplaceAndJumpTo()，onClearStack()，onBack()四个方法供业务调用，我们可以看一下onJumpTo()的实现：

@override
  void onJumpTo(
      {required name,
      Object? stackArguments,
      Map<String, dynamic>? historyArgMap,
      BuildContext? context}) {
      var arg = BaseArgument();
      arg.name = name;
      arg.arguments = stackArguments;
      RouteSettings settings =
          RouteSettings(name: RouterName.rootPage, arguments: arg);
      return _function!.onJumpTo!(settings);
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

可以看到在创建RouteSettings对象时，name为RouterName.rootPage，arg时由业务传的真正的跳转页面相关的参数。我们看一下业务的调用：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          children: [
            Text("TestHomePage"),
            Text("history length is : " + window.history.length.toString()),
            Text("href: " + WebUtil.get().getWindow().location.href),
            TextButton(
                onPressed: () {
                  var arg = TestChild1PageArgument()..isSuccess = "false";
                  NavigatorUtil().onJumpTo(
                      name: RouterName.testChild1Page,
                      stackArguments: arg,
                      historyArgMap: arg.toJson(),
                      context: context);
                },
                child: Text("Go to TestChildPage1"))
          ],
        ),
      ),
    );
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          children: [
            Text("TestChildPage1"),
            Text("history length is : " + window.history.length.toString()),
            Text("href: " + WebUtil.get().getWindow().location.href),
            TextButton(
                onPressed: () {
                  NavigatorUtil().onJumpTo(
                      name: RouterName.testChild2Page, context: context);
                },
                child: Text("Go to TestChildPage2")),
            TextButton(
                onPressed: () {
                  NavigatorUtil().onBack();
                },
                child: Text("Back to TestHomePage")),
          ],
        ),
      ),
    );
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          children: [
            Text("TestChildPage2"),
            Text("history length is : " + window.history.length.toString()),
            Text("href: " + WebUtil.get().getWindow().location.href),
            TextButton(
                onPressed: () {
                  NavigatorUtil().onBack();
                },
                child: Text("Back to TestChild1page")),
            TextButton(
                onPressed: () {
                  NavigatorUtil().onClearStack();
                },
                child: Text("Back to Root")),
          ],
        ),
      ),
    );
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

我们看一下截图展示：

图片

在这个过程中href不会发生变化，history也不会发生变化，完全符合我们的预期。

7.总结

Flutter的Navigator 2.0引入了声明式的API，使页面路由管理更加灵活和强大。相较于Navigator 1.0，Navigator 2.0支持更复杂的路由操作，如嵌套路由和动态路由配置。它使用不可变的Page对象列表来表示路由历史，与Flutter的不可变Widgets设计理念一致。Navigator 2.0还支持命名路由，通过简单的路由名称即可实现页面跳转，大大简化了路由管理的复杂度。此外，它还提供了更丰富的路由回调和状态管理功能，使开发者能够更轻松地构建复杂的Flutter应用。