Flutter Navigation 2.0跨路由页面跳转问题：无需整合完整子路由的最优实现方法

在Flutter Navigation 2.0中处理独立路由模块的跨页面跳转，核心思路是在保持模块路由独立性的前提下，让不同路由模块共享路由状态或全局导航入口，下面分两种场景给出最优实现：

场景1：需要完整的Navigation 2.0特性（URL同步、状态恢复） #

这种方式完全贴合Navigation 2.0的设计理念，通过全局路由状态管理统一控制页面栈，让cart和address两个路由模块都基于这个全局状态生成页面，既满足跳转需求，又能保持模块的独立性。

步骤1：定义全局路由状态类 #

创建一个可监听的状态类，管理整个App的页面栈，让两个路由模块都能访问并修改它：

import 'package:flutter/material.dart';

class AppRouteState extends ChangeNotifier {
  final List<Page> _pages = [];

  List<Page> get pages => List.unmodifiable(_pages);

  // 添加新页面到栈顶
  void addPage(Page page) {
    _pages.add(page);
    notifyListeners();
  }

  // 弹出栈顶页面
  void pop() {
    if (_pages.length > 1) {
      _pages.removeLast();
      notifyListeners();
    }
  }

  // 初始化Cart相关路由栈（示例）
  void initCartRoute() {
    _pages.clear();
    _pages.addAll([
      MaterialPage(child: CartDetails()),
      MaterialPage(child: DeliveryInfo()),
    ]);
    notifyListeners();
  }
}

步骤2：拆分路由模块的页面生成逻辑 #

让cart_router和address_router各自负责生成对应页面的Page对象，保持模块的独立性和可维护性：

// cart_router.dart
import 'package:flutter/material.dart';
import '../pages/cart_details.dart';
import '../pages/delivery_info.dart';

Page buildCartDetailsPage() => MaterialPage(child: CartDetails());
Page buildDeliveryInfoPage() => MaterialPage(child: DeliveryInfo());

// address_router.dart
import 'package:flutter/material.dart';
import '../pages/delivery_address.dart';
import '../pages/add_address.dart';

Page buildDeliveryAddressPage() => MaterialPage(child: DeliveryAddressPage());
Page buildAddAddressPage() => MaterialPage(child: AddAddressPage());

步骤3：实现全局RouterDelegate #

让RouterDelegate依赖全局路由状态，自动根据状态更新页面栈：

class AppRouterDelegate extends RouterDelegate with ChangeNotifier, PopNavigatorRouterDelegateMixin {
  final GlobalKey<NavigatorState> navigatorKey;
  final AppRouteState routeState;

  AppRouterDelegate(this.routeState) : navigatorKey = GlobalKey<NavigatorState>() {
    // 监听路由状态变化，同步更新Navigator
    routeState.addListener(notifyListeners);
  }

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: navigatorKey,
      pages: routeState.pages,
      onPopPage: (route, result) {
        if (!route.didPop(result)) return false;
        // 页面弹出时同步更新全局状态
        routeState.pop();
        return true;
      },
    );
  }

  @override
  Future<void> setNewRoutePath(configuration) async {
    // 处理URL路由解析（比如深链接跳转），根据配置更新全局状态
    if (configuration == '/addAddress') {
      routeState.addPage(buildAddAddressPage());
    }
  }
}

步骤4：在DeliveryInfo中触发跳转 #

通过全局状态的addPage方法，添加address模块的页面：

class DeliveryInfo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final routeState = Provider.of<AppRouteState>(context); // 用Provider/Riverpod等工具获取全局状态
    return Scaffold(
      appBar: AppBar(title: const Text('Delivery Info')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 跨模块跳转：将AddAddressPage加入全局页面栈
            routeState.addPage(buildAddAddressPage());
          },
          child: const Text('Add New Address'),
        ),
      ),
    );
  }
}

场景2：不需要URL同步，仅需简单跳转 #

如果你的App不需要深度链接、URL同步等特性，用全局NavigatorKey可以快速实现跨模块跳转，代码更简洁：

步骤1：定义全局NavigatorKey #

在全局范围内定义一个导航key，让所有模块都能访问：

// global_navigator.dart
import 'package:flutter/material.dart';

final GlobalKey<NavigatorState> globalNavigatorKey = GlobalKey<NavigatorState>();

步骤2：在RouterDelegate中使用这个Key #

确保全局Navigator和RouterDelegate关联：

class AppRouterDelegate extends RouterDelegate {
  @override
  GlobalKey<NavigatorState> get navigatorKey => globalNavigatorKey;

  // ...其他RouterDelegate实现逻辑
}

步骤3：在DeliveryInfo中直接跳转 #

用全局key直接push address模块的页面：

class DeliveryInfo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Delivery Info')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            globalNavigatorKey.currentState?.push(
              MaterialPageRoute(builder: (_) => AddAddressPage()),
            );
          },
          child: const Text('Add New Address'),
        ),
      ),
    );
  }
}

方案对比 #

两种方案都不需要将address_router整合到cart_router中，完美保持了两个模块的独立性。

内容的提问来源于stack exchange，提问作者Roman Kuzo