Flutter中bottom navigator与页面内图标跳转时保留底部导航问题

跳转后底部导航消失的核心原因是：你在页面内使用Navigator.push跳转时，是在当前路由栈顶层压入了全新的页面，这个新页面没有挂载BottomNavigationBar，自然会覆盖掉原来带底部导航的根布局。

最稳定的实现方式是基于索引切换的思路做tab跳转，不要用路由push的方式切换底部导航对应的一级页面：

• 把所有底部导航对应的一级页面，统一放在挂载了BottomNavigationBar的根Scaffold中管理
• 用IndexedStack作为根布局的body，根据当前选中的tab索引显示对应页面，底部导航栏始终固定在根Scaffold上不会消失
• 页面内的图标跳转不触发路由push，直接更新当前选中的tab索引即可

完整代码示例 #

1. 根页面实现（挂载底部导航）

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

  @override
  State<RootPage> createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  // 当前激活的tab索引，默认选中第一个
  int _currentTabIndex = 0;

  // 按底部导航顺序存放所有一级页面
  final List<Widget> _tabPages = const [
    HomePage(),
    CategoryPage(),
    MessagePage(),
    ProfilePage(),
  ];

  // 对外提供tab切换方法，供子页面调用
  void jumpToTab(int targetIndex) {
    setState(() {
      _currentTabIndex = targetIndex;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentTabIndex,
        children: _tabPages,
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentTabIndex,
        onTap: jumpToTab,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
          BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
          BottomNavigationBarItem(icon: Icon(Icons.message), label: "消息"),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: "我的"),
        ],
      ),
    );
  }
}

2. 子页面内调用跳转
   在任意一级tab页面中，点击图标需要跳转到其他tab时，直接调用根页面暴露的切换方法即可，不要使用Navigator.push：

// 比如首页内点击分类图标，跳转到分类tab（索引为1）
IconButton(
  onPressed: () {
    // 找到根页面状态，触发tab切换
    context.findAncestorStateOfType<_RootPageState>()?.jumpToTab(1);
  },
  icon: const Icon(Icons.category)
)

• 如果项目用了状态管理框架（Provider/Riverpod/Bloc等），可以把_currentTabIndex放到全局状态中维护，子页面直接更新状态值即可，不需要用findAncestorStateOfType获取根状态
• 只有底部导航对应的一级页面切换用索引更新逻辑，如果是一级页面内跳转子页面（比如首页跳商品详情、跳设置页这类不需要显示底部导航的场景），正常用Navigator.push即可
• IndexedStack默认会一次性初始化所有tab页面，如果页面初始化逻辑较重需要懒加载，可以替换为PageView配合AutomaticKeepAliveClientMixin保留页面状态，核心切换逻辑不变

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