Flutter 嵌套路由详解

简介

嵌套路由允许在应用的某个部分维护独立的导航栈,常用于实现底部导航栏、标签页等场景。

基本实现

Navigator 嵌套

class NestedNavigationDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Navigator(
        onGenerateRoute: (settings) {
          return MaterialPageRoute(
            builder: (context) => HomePage(),
          );
        },
      ),
    );
  }
}

使用 NavigatorState

class SubNavigator extends StatefulWidget {
  @override
  _SubNavigatorState createState() => _SubNavigatorState();
}

class _SubNavigatorState extends State<SubNavigator> {
  final GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>();
  
  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: _navigatorKey,
      onGenerateRoute: (settings) {
        return MaterialPageRoute(
          builder: (context) => SubPage(),
        );
      },
    );
  }
  
  // 导航方法
  void navigateToDetail() {
    _navigatorKey.currentState?.push(
      MaterialPageRoute(
        builder: (context) => DetailPage(),
      ),
    );
  }
}

底部导航实现

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0;
  final List<GlobalKey<NavigatorState>> _navigatorKeys = [
    GlobalKey<NavigatorState>(),
    GlobalKey<NavigatorState>(),
    GlobalKey<NavigatorState>(),
  ];
  
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        final isFirstRouteInCurrentTab = 
            !await _navigatorKeys[_currentIndex]
                .currentState!
                .maybePop();
                
        if (isFirstRouteInCurrentTab) {
          if (_currentIndex != 0) {
            setState(() => _currentIndex = 0);
            return false;
          }
        }
        return isFirstRouteInCurrentTab;
      },
      child: Scaffold(
        body: IndexedStack(
          index: _currentIndex,
          children: [
            _buildNavigator(0),
            _buildNavigator(1),
            _buildNavigator(2),
          ],
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          onTap: (index) {
            setState(() => _currentIndex = index);
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.business),
              label: 'Business',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'Profile',
            ),
          ],
        ),
      ),
    );
  }
  
  Widget _buildNavigator(int index) {
    return Navigator(
      key: _navigatorKeys[index],
      onGenerateRoute: (settings) {
        return MaterialPageRoute(
          builder: (context) => _buildPage(index),
        );
      },
    );
  }
  
  Widget _buildPage(int index) {
    switch (index) {
      case 0:
        return HomePage();
      case 1:
        return BusinessPage();
      case 2:
        return ProfilePage();
      default:
        return HomePage();
    }
  }
}

完整示例

// 页面基类
abstract class TabPage extends StatelessWidget {
  final String title;
  final IconData icon;
  
  const TabPage({
    Key? key,
    required this.title,
    required this.icon,
  }) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(icon, size: 48),
            SizedBox(height: 16),
            Text(title),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () => _navigateToDetail(context),
              child: Text('View Detail'),
            ),
          ],
        ),
      ),
    );
  }
  
  void _navigateToDetail(BuildContext context) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => DetailPage(title: title),
      ),
    );
  }
}

// 具体页面实现
class HomePage extends TabPage {
  HomePage() : super(title: 'Home', icon: Icons.home);
}

class BusinessPage extends TabPage {
  BusinessPage() : super(title: 'Business', icon: Icons.business);
}

class ProfilePage extends TabPage {
  ProfilePage() : super(title: 'Profile', icon: Icons.person);
}

// 详情页
class DetailPage extends StatelessWidget {
  final String title;
  
  const DetailPage({
    Key? key,
    required this.title,
  }) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('$title Detail'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Detail page for $title'),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () => Navigator.pop(context),
              child: Text('Go Back'),
            ),
          ],
        ),
      ),
    );
  }
}

最佳实践

简单场景用 IndexedStack + 状态管理”假装”嵌套：四个 Tab 切 IndexedStack 保活，状态丢不了——作者 freight 项目的真实取舍：Tab 页都是列表+表单，重建成本低，没必要上真嵌套
真要做嵌套，给每个 Tab 独立 Navigator：Get.nestedKey(1) 配 Navigator(key: ...)，Tab 内 push 不影响其他 Tab 的栈
Android 返回键先弹内层栈：内层 Navigator 能 pop 就先 pop 内层，内层到根了再走外层退出逻辑——用 PopScope/WillPopScope 接管
嵌套层级封顶两层：Tab → 内层栈；再往里套第三层 Navigator，返回逻辑和手势冲突会把人逼疯

注意事项

Get.nestedKey 的 id 别写错：跳转时 Get.toNamed('/detail', id: 1) 的 id 必须和 Navigator 的 nestedKey 对上，对不上就跳到根 Navigator 上去了
嵌套路由的页面别用 Get.offAll：offAll 清的是根栈，内层栈清不掉，切 Tab 会看到”幽灵页面”
内存：每个 Tab 的 Navigator 各自持有页面栈，四个 Tab 各 push 三层就是 12 个页面在内存里——Tab 页懒加载，别一次性全建
深链接直达 Tab 内二级页面时，先把 Tab 栈搭好（切到对应 Tab 再 push），否则返回键行为是错的

实战案例

嵌套路由（Tab 内各走各的导航栈）这个场景，我在货运项目里是”绕过去”的。App 底部有首页/运单/消息/我的四个 Tab（看 RouteNames 里的 main、waybill、msg、mine 就知道），但我没用真正的嵌套 Navigator，而是把 Tab 切换做成页面级切换、靠 GetX 的状态保持来”假装”嵌套。为什么？因为 GetX 的嵌套路由要配 Get.nestedKey，心智负担重，而我的 Tab 页都是列表+表单，状态丢了重建也很快。嵌套路由是”正确”的方案，但”够用且简单”的方案先赢，这是我做业务项目的真实取舍。真要做复杂嵌套（比如 Tab 内还能 push 三层），再老老实实上 Get.nestedKey。

总结

嵌套路由的核心就一句话：每个 Tab 配一个独立 Navigator，各管各的栈。GlobalKey 拿子路由的 NavigatorState，切换 Tab 时不重建页面，状态自然保留。简单项目用页面级切换+状态保持也能应付，但 Tab 内还要 push 多层时，老老实实上嵌套 Navigator——“正确”的方案留给”复杂”的场景。

简介