如何在未列入pages列表的页面中显示BottomNavigationBar？

要让未在pages列表里的页面（比如从HomeScreen进入的DetailsPage）也能显示BottomNavigationBar，且底部导航仅做展示不负责路由，你可以通过嵌套Navigator的方式实现，这样底部导航会始终挂载在主Scaffold上，页面切换在内部Navigator中完成。

修改后的完整代码： #

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

  @override
  State<BottomNavBars> createState() => _BottomNavBarsState();
}

class _BottomNavBarsState extends State<BottomNavBars> {
  int _selectedIndex = 0;
  // 给每个主页面绑定key，用于切换底部导航时重置页面栈
  final List<GlobalKey<NavigatorState>> _navigatorKeys = [
    GlobalKey<NavigatorState>(),
    GlobalKey<NavigatorState>(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
    // 切换底部导航时，回到对应页面的根路由
    _navigatorKeys[index].currentState?.popUntil((route) => route.isFirst);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: List.generate(2, (index) {
          return Offstage(
            offstage: index != _selectedIndex,
            child: Navigator(
              key: _navigatorKeys[index],
              onGenerateRoute: (settings) {
                // 主页面路由
                if (settings.name == '/') {
                  return MaterialPageRoute(
                    builder: (_) => index == 0 ? const Screen1() : const Screen2(),
                  );
                }
                // 详情页路由，可根据需求扩展更多页面
                if (settings.name == '/details') {
                  return MaterialPageRoute(
                    builder: (_) => const DetailsPage(),
                  );
                }
                return null;
              },
            ),
          );
        }),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Watch',
            backgroundColor: Colors.green,
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

// 示例详情页
class DetailsPage extends StatelessWidget {
  const DetailsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('详情页')),
      body: const Center(child: Text('这是详情页面，底部导航依然显示')),
    );
  }
}

关键修改说明： #

• 给每个主页面添加GlobalKey<NavigatorState>，切换底部导航时重置对应页面的路由栈，避免残留之前打开的详情页。
• 用Stack+Offstage管理多个嵌套Navigator，仅显示当前选中索引对应的Navigator。
• 内部Navigator负责处理主页面和详情页的路由跳转，比如在Screen1中跳转到详情页的代码：

  Navigator.of(context).pushNamed('/details');
  

• 底部导航的onTap方法增加重置路由栈的逻辑，确保切换底部导航时回到对应主页面的初始状态。

这样修改后，无论是主页面还是从主页面打开的详情页，底部导航都会一直显示，且底部导航仅负责切换主页面，详情页的路由由内部Navigator处理。

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