Flutter同标签内页面导航：保留BottomNavigationBar实现方法

嘿，这个需求在Flutter开发里挺常见的，咱们可以通过嵌套导航的方式来解决——让BottomNavigationBar作为外层的持久化组件，每个标签页内部单独维护一个导航栈，这样同一标签内跳转页面时，底部导航栏就会一直保持显示啦。

核心思路 #

外层用一个带BottomNavigationBar的Scaffold，每个标签页对应的body是一个独立的Navigator组件。每个Navigator拥有自己的页面栈，跳转操作只会影响当前标签的内部栈，不会触动外层的BottomNavigationBar。

完整代码示例 #

1. 外层主页面（带BottomNavigationBar） #

import 'package:flutter/material.dart';

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _currentTabIndex = 0;
  // 给每个标签的Navigator分配全局Key，方便后续操作（比如切回标签时回到根页面）
  final List<GlobalKey<NavigatorState>> _tabNavigatorKeys = [
    GlobalKey<NavigatorState>(),
    // 如果你有更多标签，继续添加对应的Key
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 用IndexedStack保持每个标签页的状态，切换标签时不会重建页面
      body: IndexedStack(
        index: _currentTabIndex,
        children: [
          // Profile标签的内部导航器
          Navigator(
            key: _tabNavigatorKeys[0],
            initialRoute: '/profile',
            onGenerateRoute: (routeSettings) {
              WidgetBuilder pageBuilder;
              switch (routeSettings.name) {
                case '/profile':
                  pageBuilder = (context) => const ProfilePage();
                  break;
                case '/settings':
                  pageBuilder = (context) => const SettingsPage();
                  break;
                default:
                  throw Exception('未定义的路由: ${routeSettings.name}');
              }
              return MaterialPageRoute(
                builder: pageBuilder,
                settings: routeSettings,
              );
            },
          ),
          // 其他标签的导航器可以在这里继续添加...
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentTabIndex,
        onTap: (index) {
          // 如果点击的是当前标签，就回到该标签的根页面
          if (index == _currentTabIndex) {
            _tabNavigatorKeys[index].currentState?.popUntil((route) => route.isFirst);
          } else {
            setState(() {
              _currentTabIndex = index;
            });
          }
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.person_outline),
            label: 'Profile',
          ),
          // 其他标签项...
        ],
      ),
    );
  }
}

2. Profile页面（发起跳转） #

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('个人中心')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 这里用当前页面的context跳转，会使用内部的Navigator
            Navigator.pushNamed(context, '/settings');
          },
          child: const Text('进入设置页面'),
        ),
      ),
    );
  }
}

3. Settings页面（目标页面） #

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('设置')),
      body: const Center(
        child: Text('这是设置页面'),
      ),
    );
  }
}

关键细节说明 #

• IndexedStack的作用：确保切换标签时，每个标签的Navigator状态被保留，不会重新初始化，提升用户体验。
• 全局NavigatorKey：方便在切换回当前标签时，快速将页面栈重置到根页面（比如用户多次跳转后，点击当前标签可以回到初始页面）。
• 内部Navigator跳转：跳转时使用当前页面的context，而非外层Scaffold的context，这样路由变化只会影响当前标签的内部栈，外层的BottomNavigationBar不受任何影响。

这样操作后，你从Profile页面跳转到Settings页面时，底部的BottomNavigationBar就会一直稳定显示啦，完全满足你的需求～

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