Flutter中如何检查回退栈并优化B/C页面导航？

使用 Navigator 2.0 实现 #

Navigator 2.0 允许完全自定义路由栈的管理逻辑，通过自定义 RouterDelegate 可以精准控制页面实例的添加与移除：

• 核心逻辑：每次跳转B或C页面时，先遍历当前路由栈，移除所有已存在的对应页面实例，再将新实例添加到栈顶，同时始终保留根页面A。

代码示例 #

1. 定义页面路由类型

enum PageType { a, b, c }

class MyPage extends Page {
  final PageType type;
  MyPage({required this.type}) : super(key: ValueKey(type));

  @override
  Route createRoute(BuildContext context) {
    return MaterialPageRoute(
      builder: (context) {
        switch (type) {
          case PageType.a: return APage();
          case PageType.b: return BPage();
          case PageType.c: return CPage();
        }
      },
    );
  }
}

2. 自定义 RouterDelegate

class MyRouterDelegate extends RouterDelegate<List<PageType>> with ChangeNotifier, PopNavigatorRouterDelegateMixin<List<PageType>> {
  final GlobalKey<NavigatorState> navigatorKey;
  List<PageType> _stack = [PageType.a];

  MyRouterDelegate() : navigatorKey = GlobalKey<NavigatorState>();

  @override
  List<PageType> get currentConfiguration => _stack;

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: navigatorKey,
      pages: _stack.map((type) => MyPage(type: type)).toList(),
      onPopPage: (route, result) {
        if (!route.didPop(result)) return false;
        if (_stack.length > 1) {
          _stack.removeLast();
          notifyListeners();
        }
        return true;
      },
    );
  }

  // 自定义跳转方法，处理B/C页面去重
  void navigateTo(PageType target) {
    if (target == PageType.b || target == PageType.c) {
      _stack.removeWhere((type) => type == target);
    }
    if (_stack.isEmpty) _stack.add(PageType.a);
    _stack.add(target);
    notifyListeners();
  }

  @override
  Future<void> setNewRoutePath(List<PageType> configuration) async {
    _stack = configuration;
    notifyListeners();
  }
}

3. 页面中调用跳转

// B页面内跳转到C
ElevatedButton(
  onPressed: () {
    (Router.of(context).routerDelegate as MyRouterDelegate).navigateTo(PageType.c);
  },
  child: const Text('跳转到C'),
)

使用 GetX 实现 #

GetX 的路由管理提供了灵活的栈操作API，可直接修改路由历史或通过路由谓词实现页面去重：

• 核心逻辑：跳转B/C时，过滤路由栈保留根页面A，移除已存在的目标页面实例，再推入新实例；或通过 offAllNamed 结合谓词快速实现栈清理。

代码示例 #

1. 定义路由名称

class Routes {
  static const String a = '/a';
  static const String b = '/b';
  static const String c = '/c';
}

2. 配置 GetMaterialApp

GetMaterialApp(
  initialRoute: Routes.a,
  getPages: [
    GetPage(name: Routes.a, page: () => APage()),
    GetPage(name: Routes.b, page: () => BPage()),
    GetPage(name: Routes.c, page: () => CPage()),
  ],
);

3. 方式一：直接修改路由历史

// B页面内跳转到C
ElevatedButton(
  onPressed: () {
    final history = Get.routing.history;
    // 保留A页面，移除所有已存在的C页面
    final newHistory = history.where((route) => route.settings.name == Routes.a || route.settings.name != Routes.c).toList();
    Get.routing.history = newHistory;
    Get.toNamed(Routes.c);
  },
  child: const Text('跳转到C'),
)

4. 方式二：使用 offAllNamed 谓词（更简洁）

// 跳转到C时，仅保留A页面，其他页面全部替换为新的C页面
Get.offAllNamed(Routes.c, predicate: (route) => route.settings.name == Routes.a);

内容的提问来源于stack exchange，提问作者Ashfaq Kayes