关于Navigator 2.0 详细内容可以参考 此文章,今天就对此文章进行一个封装 Flutter Navigator 2.0 指南与原理解析

一.修改Main.dart的启动代码

Navigator 2.0 之后，Flutter 也提供了 MaterialApp 的新构造函数 router 来帮助我们直接在应用顶层构造出全局的 Router 组件，使用方式如下

MaterialApp.router(
  title: 'Flutter Navigator 2.0 Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  //必传项目 路由返回 用来解析浏览器路径 
  routeInformationParser: MyRouteParser(),
  //必传项目 路由代理
  routerDelegate: delegate,
)

注意 delegate的初始化要在build之前完成

class MyApp extends StatelessWidget {
  final MyRouterDelegate routerDelegate=MyRouterDelegate();
   MyApp({Key? key}) : super(key: key);

二.MyRouteParser的简单实现

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);
  }
}

三.实现 RouterDelegate

RouteInformationParser 传递过来的RouteInformation 被 RouterDelegate所接受 执行setInitialRoutePath方法 他调用setNewRoutePath 创建新的路由

///继承RouterDelegate并混合PopNavigatorRouterDelegateMixin和ChangeNotifier
///ChangeNotifier 用来通知路由改变
///backButtonDispatcher 发出回退按钮事件时，会调用 RouterDelegate 的 popRoute() 方法，由混入的 PopNavigatorRouterDelegateMixin 实现。
class MyRouterDelegate extends RouterDelegate<RouteSettings>
    with PopNavigatorRouterDelegateMixin<RouteSettings>, ChangeNotifier {
  static MyRouterDelegate? _instance;

  factory MyRouterDelegate() => _instance ??= MyRouterDelegate._();

  MyRouterDelegate._();

  ///页面栈
  List<Page> _stack = [];
  //当前页面信息
  RouteSettings? _setting;

  //重写navigatorKey
  @override
  GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

  @override
  // TODO: implement currentConfiguration
  RouteSettings? get currentConfiguration => _stack.last;
///如果发现showModelBottomSheet不能受返回键控制 请注释掉popRoute这方法 将首页的Widegt包裹WillPopScope   --4.22新加此注释
  @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 = doubleCheckExit(navigatorKey.currentContext!);
    // bool result = await ExitUtil.backToDesktop();
    return !result;
  }
//添加页面的操作
  void addPage({required name, arguments}) {
    _setting = RouteSettings(name: name, arguments: arguments);
    changePage();

    notifyListeners();
  }

  @override
  Widget build(BuildContext context) {
   Navigator(
        key: navigatorKey,
        pages: _stack,
        onPopPage: _onPopPage,
    );
  }

  /// 按下返回的回调
  bool _onPopPage(Route<dynamic> route, dynamic result) {
    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?.name == RouterName.rootPage) {
      _stack.clear();
    }
    page = buildPage(name: _setting?.name, arguments: _setting?.arguments);
    tempPages = [...tempPages, page];

    _stack = tempPages;
  }
  ///获取当前页面位于栈的位置
  int getCurrentIndex(List<Page> pages, RouteSettings setting) {
    for (int i = 0; i < pages.length; i++) {
      Page page = pages[i];
      if (page.name == setting.name) {
        return i;
      }
    }
    return -1;
  }
  ///首次进入时会通过这个方法来配置路由站
  @override
  Future<void> setNewRoutePath(RouteSettings configuration) async {
    if (configuration.name == RouterName.rootPage) {
      _stack.clear();
    }
    addPage(name: configuration.name, arguments: configuration.arguments);
  }

//建造页面
  buildPage({required name, arguments}) {
    return MaterialPage(
        child: getPageChild(name: name, arguments: arguments),
        arguments: arguments,
        name: name,
        key: ValueKey(name));
  }

  static DateTime? _lastTapDt;

  /// 双击退出 单机提示再按一次
  static bool doubleCheckExit(context) {
    if (_lastTapDt == null ||
        DateTime.now().difference(_lastTapDt!) > const Duration(seconds: 1)) {
      ScaffoldMessenger.of(context).clearMaterialBanners();
      ScaffoldMessenger.of(context)
          .showSnackBar(const SnackBar(content: Text("再按一次退出")));
      _lastTapDt = DateTime.now();
      return false;
    }
    _lastTapDt = null;
    return true;
  }

  //通过routerName获取页面
  Widget getPageChild({required name, arguments}) {
    Widget page;
    Map? arg;
    if (arguments is Map) {
      arg = arguments;
    }
    switch (name) {
      case RouterName.rootPage:
        page = RootPage(arguments: arg);
        break;
      default:
        page = const UndefinedPage();
    }
    return page;
  }
}

四.使用

 Center(
        child: TextButton(
          child: const Text("点我跳转"),
          onPressed: () {
            MyRouterDelegate().addPage(name: RouterName.splashPage);
          },
        ),
      ),

五.优化

当项目文件比较多时将内容拆分成多个

1. route_name.dart 存放路由名称

class RouterName {
  static const String rootPage = "/"; //默认MyRouteParser传回来的地址是/您可以在返回之前做修改或者把默认修改成/
  static const String splashPage = "SPLASH_PAGE";
}

2.route_page_config.dart 根据路由名称寻找页面

///通过Router的名字获取页面
///[name] 路由名称
///[arguments] 可空 路由传递参数
  Widget getPageChild({required name, arguments}) {
    Widget page;
    Map? arg;
    if (arguments is Map) {
      arg = arguments;
    }
    switch (name) {
      case RouterName.rootPage:
        page = RootPage(arguments: arg);
        break;
      default:
        page = const UndefinedPage();
    }
    return page;
  }

3.my_route_information_parser.dart 没有涉及到浏览器跳转和上面保持不变

4.my_router_delegate.dart 改动较大

///继承RouterDelegate并混合PopNavigatorRouterDelegateMixin和ChangeNotifier
///ChangeNotifier 用来通知路由改变
///backButtonDispatcher 发出回退按钮事件时，会调用 RouterDelegate 的 popRoute() 方法，由混入的 PopNavigatorRouterDelegateMixin 实现。
class MyRouterDelegate extends RouterDelegate<RouteSettings>
    with PopNavigatorRouterDelegateMixin<RouteSettings>, ChangeNotifier {
  ///页面栈
  List<Page> _stack = [];

  //当前的界面信息
  RouteSettings? _setting = const RouteSettings(name: RouterName.rootPage);

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

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

    NavigatorUtil()
        .registerRouteJump(RouteJumpFunction(onJumpTo: (RouteSettings setting) {
      _setting = setting;
      changePage();
    }, onReplaceAndJumpTo: (RouteSettings setting) {
      if (_stack.isNotEmpty) {
        _stack.removeLast();
      }
      _setting = setting;
      changePage();
    }));
  }

  @override
  // TODO: implement currentConfiguration
  RouteSettings? get currentConfiguration => _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?.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> setNewRoutePath(RouteSettings configuration) async {
    debugPrint("setNewRoutePath${configuration}");
    if (configuration.name == RouterName.rootPage) {
      _stack.clear();
    }
    addPage(name: configuration.name, arguments: configuration.arguments);
  }
}

5.创建navigator_util.dart 管理跳转

typedef OnJumpTo = void Function(RouteSettings settings);

///创建跳转方法的抽象类
///传递一个Function(routeSetting)
abstract class _RouteJumpFunction {
  ///跳转到
  void onJumpTo({required name, Map? arguments});

  ///替换当前页面的跳转
  void onReplaceAndJumpTo({required name, Map? arguments});
}

class RouteJumpFunction {
  OnJumpTo? onJumpTo;
  OnJumpTo? onReplaceAndJumpTo;

  RouteJumpFunction({this.onJumpTo, this.onReplaceAndJumpTo});
}

class NavigatorUtil extends _RouteJumpFunction {
  //创造工厂方法
  static NavigatorUtil? _instance;

  factory NavigatorUtil() => _instance ??= NavigatorUtil._();

  NavigatorUtil._();

  //跳转方法
  RouteJumpFunction? _function;
  

  //当前页面
  RouteSettings? _current;

  ///注册路由跳转逻辑
  void registerRouteJump(RouteJumpFunction function) {
    _function = function;
  }

//编写跳转逻辑
  @override
  void onJumpTo({required name, Map? arguments}) {
    RouteSettings settings = RouteSettings(name: name, arguments: arguments);
    return _function!.onJumpTo!(settings);
  }

//编写替换当前页面的跳转逻辑
  @override
  void onReplaceAndJumpTo({required name, Map? arguments}) {
    RouteSettings setting = RouteSettings(name: name, arguments: arguments);
    _function?.onReplaceAndJumpTo!(setting);
  }


  void notify(List<Page> currentPages, List<Page> prePages) {
    if (currentPages == prePages) {
      return;
    }
    RouteSettings setting = RouteSettings(
        name: currentPages.last.name, arguments: currentPages.last.arguments);
    _notify(setting);
  }

  void _notify(RouteSettings setting) {

    debugPrint("当前的页面是:${setting.name}");
    debugPrint("上一个页面是:${_current?.name}");
    
    _current = setting;
  }
}

//建造页面
buildPage({required name, arguments}) {
  return MaterialPage(
      child: getPageChild(name: name, arguments: arguments),
      arguments: arguments,
      name: name,
      key: ValueKey(name));
}

///获取当前页面在栈中的位置
int getCurrentIndex(List<Page> pages, RouteSettings setting) {
  for (int i = 0; i < pages.length; i++) {
    Page page = pages[i];
    if (page.name == setting.name) {
      return i;
    }
  }
  return -1;
}

6.退出方法

import 'package:flutter/material.dart';

class ExitUtil{
  static DateTime? _lastTapDt;

  /// 双击退出 单击提示再按一次
  static bool doubleCheckExit(context) {
    if (_lastTapDt == null ||
        DateTime.now().difference(_lastTapDt!) > const Duration(seconds: 1)) {
      ScaffoldMessenger.of(context).clearMaterialBanners();
      ScaffoldMessenger.of(context)
          .showSnackBar(const SnackBar(content: Text("再按一次退出")));
      _lastTapDt = DateTime.now();
      return false;
    }
    _lastTapDt = null;
    return true;
  }
}

7.使用

Center(
        child: TextButton(
          child: const Text("点我跳转"),
          onPressed: () {
            NavigatorUtil().onJumpTo(name: RouterName.splashPage);
          },
        ),
      ),

项目demo地址链接：https://pan.baidu.com/s/1BqIdxlAO7M9Q9wDyJwamdA
提取码：r6ob