Flutter中使用Persistent_bottom_nav_bar包在指定页面隐藏底部导航栏

核心实现思路 #

借助PersistentTabController的当前索引，动态控制底部导航栏的显示状态：当切换到个人中心页（对应索引为2）时隐藏导航栏，其余页面保持正常显示。

修改主页面代码 #

在PersistentTabView的配置参数中添加hideNavigationBar属性，根据控制器当前索引判断是否隐藏导航栏。注意确保stateManagement: true已开启（你的代码中已配置），这样索引变化时会自动触发UI更新。

修改后的_MainPageState构建方法代码：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: PersistentTabView(
      context,
      navBarHeight: 60,
      padding: const NavBarPadding.only(top: 10),
      decoration: NavBarDecoration(
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.2),
            offset: const Offset(10, 5),
            spreadRadius: 7,
          ),
        ],
      ),
      controller: _controller,
      screens: _screens(),
      items: _navBarsItems(),
      navBarStyle: NavBarStyle.style6,
      stateManagement: true,
      // 新增：根据当前索引控制导航栏显示/隐藏
      hideNavigationBar: _controller.index == 2,
      // 可选：添加过渡动画优化体验
      hideNavigationBarAnimationDuration: const Duration(milliseconds: 300),
      hideNavigationBarCurve: Curves.easeInOut,
    ),
  );
}

补充说明 #

• 若个人中心页内有页面跳转需求，跳转后的页面若需保持无底部导航，直接使用Navigator.push跳转即可（跳转后的页面不受PersistentTabView控制，自然不会显示底部导航）。
• 可通过调整hideNavigationBarAnimationDuration和hideNavigationBarCurve参数，自定义导航栏隐藏/显示的过渡动画效果。

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