Flutter：基于GoRouter嵌套导航栈自动显示AppBar返回按钮

核心问题分析 #

你用全局navigatorKey判断的是根导航器的状态，而每个底部tab的嵌套导航栈有独立的Navigator实例，所以全局key无法获取到嵌套栈的canPop状态；同时路径显示异常是因为路由配置没有正确使用嵌套结构。

解决方案步骤 #

1. 为每个tab的嵌套导航栈分配独立的GlobalKey<NavigatorState>
2. 使用ShellRoute封装每个tab的路由结构，关联对应的导航key
3. 根据当前活跃tab的导航key判断是否可回退，并触发对应栈的pop操作

完整代码示例 #

1. 定义独立的导航key

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

// 每个tab对应独立的导航key
final homeNavigatorKey = GlobalKey<NavigatorState>();
final collectionNavigatorKey = GlobalKey<NavigatorState>();

2. 配置GoRouter路由

final router = GoRouter(
  initialLocation: '/home',
  routes: [
    // Home tab的嵌套路由栈
    ShellRoute(
      navigatorKey: homeNavigatorKey,
      builder: (context, state, child) => BottomNavScreen(
        currentIndex: 0,
        child: child,
      ),
      routes: [
        GoRoute(
          path: '/home',
          builder: (context, state) => const HomePage(),
          // Home tab的子路由
          routes: [
            GoRoute(
              path: 'detail',
              builder: (context, state) => const HomeDetailPage(),
            ),
          ],
        ),
      ],
    ),
    // Collection tab的嵌套路由栈
    ShellRoute(
      navigatorKey: collectionNavigatorKey,
      builder: (context, state, child) => BottomNavScreen(
        currentIndex: 1,
        child: child,
      ),
      routes: [
        GoRoute(
          path: '/collection',
          builder: (context, state) => const CollectionPage(),
          // Collection tab的子路由
          routes: [
            GoRoute(
              path: 'newSpecimen',
              builder: (context, state) => const NewSpecimenPage(),
            ),
          ],
        ),
      ],
    ),
  ],
);

3. 底部导航栏与AppBar逻辑实现

class BottomNavScreen extends StatefulWidget {
  final int currentIndex;
  final Widget child;

  const BottomNavScreen({
    super.key,
    required this.currentIndex,
    required this.child,
  });

  @override
  State<BottomNavScreen> createState() => _BottomNavScreenState();
}

class _BottomNavScreenState extends State<BottomNavScreen> {
  late int _currentIndex;

  @override
  void initState() {
    super.initState();
    _currentIndex = widget.currentIndex;
  }

  @override
  void didUpdateWidget(covariant BottomNavScreen oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.currentIndex != widget.currentIndex) {
      setState(() => _currentIndex = widget.currentIndex);
    }
  }

  // 获取当前活跃tab对应的导航key
  GlobalKey<NavigatorState>? get _activeNavigatorKey {
    switch (_currentIndex) {
      case 0:
        return homeNavigatorKey;
      case 1:
        return collectionNavigatorKey;
      default:
        return null;
    }
  }

  @override
  Widget build(BuildContext context) {
    // 判断当前嵌套栈是否可回退
    final canPop = _activeNavigatorKey?.currentState?.canPop() ?? false;

    return Scaffold(
      appBar: AppBar(
        leading: canPop
            ? IconButton(
                icon: const Icon(Icons.arrow_back),
                onPressed: () => _activeNavigatorKey?.currentState?.pop(),
              )
            : null,
        title: const Text('Nested Nav Demo'),
      ),
      body: widget.child,
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          switch (index) {
            case 0:
              context.go('/home');
              break;
            case 1:
              context.go('/collection');
              break;
          }
        },
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.collections), label: 'Collection'),
        ],
      ),
    );
  }
}

// 示例页面
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () => context.go('/home/detail'),
        child: const Text('Go to Detail'),
      ),
    );
  }
}

class HomeDetailPage extends StatelessWidget {
  const HomeDetailPage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('Home Detail Page'));
  }
}

class CollectionPage extends StatelessWidget {
  const CollectionPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () => context.go('/collection/newSpecimen'),
        child: const Text('Add New Specimen'),
      ),
    );
  }
}

class NewSpecimenPage extends StatelessWidget {
  const NewSpecimenPage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('New Specimen Page'));
  }
}

关键说明 #

• 独立导航key：每个ShellRoute绑定专属的navigatorKey，确保能精准获取对应tab嵌套栈的状态
• 嵌套路由结构：子路由定义在对应tab的根路由下，GoRouter会自动拼接完整路径（如/collection/newSpecimen）
• 返回逻辑：点击返回按钮时，调用当前活跃tab导航栈的pop方法，仅操作当前tab的页面栈，不会影响其他tab的状态
• 状态保留：切换tab时，GoRouter会自动保留每个ShellRoute的导航栈状态，返回时回到之前的嵌套页面

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