Flutter底部导航栏仅主页面可见，如何实现全局显示？

方案一：给每个底部导航页嵌套独立Navigator #

原来的问题是因为从主页面跳详情页时用了全局Navigator.push，会把整个页面替换掉，导致底部导航栏消失。解决思路是让底部导航栏所在的Scaffold作为父容器，每个主页面（HomePage、CardPage）各自嵌套一个Navigator，详情页在对应主页面的子Navigator中打开，这样底部导航栏始终处于父层级，不会被覆盖。

示例代码修改：

class NavigationPage extends StatefulWidget {
  @override
  _NavigationPageState createState() => _NavigationPageState();
}

class _NavigationPageState extends State<NavigationPage> {
  int _currentIndex = 0;
  // 给每个导航页的Navigator分配全局Key，方便切换时重置页面栈
  final List<GlobalKey<NavigatorState>> _navigatorKeys = [
    GlobalKey<NavigatorState>(),
    GlobalKey<NavigatorState>(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 用IndexedStack保持每个导航页的状态
      body: IndexedStack(
        index: _currentIndex,
        children: [
          // HomePage对应的子Navigator
          Navigator(
            key: _navigatorKeys[0],
            onGenerateRoute: (settings) => MaterialPageRoute(
              builder: (context) => HomePage(),
            ),
          ),
          // CardPage对应的子Navigator
          Navigator(
            key: _navigatorKeys[1],
            onGenerateRoute: (settings) => MaterialPageRoute(
              builder: (context) => CardPage(),
            ),
          ),
        ],
      ),
      bottomNavigationBar: CustomBottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          // 切换底部导航时，把目标页面的Navigator栈重置到首页
          if (_currentIndex != index) {
            _navigatorKeys[index].currentState?.popUntil((route) => route.isFirst);
            setState(() => _currentIndex = index);
          }
        },
      ),
    );
  }
}

在主页面（比如HomePage）中跳详情页时，使用当前页面的Navigator：

// HomePage内跳转详情页
Navigator.of(context).push(MaterialPageRoute(
  builder: (context) => DetailPage(),
));

方案二：全局Navigator嵌套底部导航栏 #

如果不想给每个页面单独加Navigator，可以把底部导航栏作为持久化组件，放在全局Navigator的外层。这种方式需要自定义路由栈管理，确保底部导航栏始终显示：

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

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0;
  final GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Navigator(
        key: _navigatorKey,
        onGenerateRoute: (settings) {
          // 根据路由名称生成页面，所有页面都在这里处理
          switch (settings.name) {
            case '/home':
              return MaterialPageRoute(builder: (context) => HomePage());
            case '/card':
              return MaterialPageRoute(builder: (context) => CardPage());
            case '/detail':
              return MaterialPageRoute(builder: (context) => DetailPage());
            default:
              return MaterialPageRoute(builder: (context) => HomePage());
          }
        },
      ),
      bottomNavigationBar: CustomBottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() => _currentIndex = index);
          // 切换导航时跳转到对应主页面，同时重置栈
          _navigatorKey.currentState?.pushNamedAndRemoveUntil(
            index == 0 ? '/home' : '/card',
            (route) => false,
          );
        },
      ),
    );
  }
}

注意事项 #

• 详情页布局要避免被底部导航栏遮挡，可以在页面根组件添加SafeArea，或者手动添加底部内边距：padding: EdgeInsets.only(bottom: MediaQuery.of(context).padding.bottom)
• 切换底部导航时，记得重置对应页面的路由栈，避免栈积累过多页面导致内存问题

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