使用Persistent Bottom Navigation Bar包时侧边栏跳转丢失底部导航的问题

API 探路者

2026-6-27

问题核心原因：从侧边栏抽屉跳转时，你大概率用了Flutter原生的Navigator.push方法，这会把页面推到全局导航栈，脱离了persistent_bottom_nav_bar包维护的导航容器，导致底部导航栏无法持久显示。

下面是两种直接可行的解决方案：

方案1：使用包提供的导航方法跳转

persistent_bottom_nav_bar内置了专门的导航方法，能确保页面始终在包的导航结构内，底部栏自然会保留。在抽屉的点击事件里替换原生Navigator调用即可：

ListTile(
  title: const Text('联系我们'),
  onTap: () {
    // 先关闭抽屉
    Navigator.pop(context);
    // 用包的方法跳转页面，强制保留底部栏
    PersistentNavBarNavigator.pushNewScreen(
      context,
      screen: const ContactUsScreen(),
      withNavBar: true, // 强制显示底部导航栏，可根据需求调整
      pageTransitionAnimation: PageTransitionAnimation.cupertino, // 可选转场动画
    );
  },
)

方案2：将目标页面纳入底部导航栏的页面列表，通过切换索引跳转

如果"联系我们"属于底部导航栏的一级页面，可以把它加入包的页面配置列表，然后在抽屉点击时直接切换底部导航栏的索引：

第一步：更新底部导航栏的页面配置

final List<Widget> _pages = [
  HomeScreen(),
  ProfileScreen(),
  // ... 其他页面
  ContactUsScreen(), // 将联系我们加入页面列表
];

第二步：抽屉点击时切换索引

// 先获取底部导航栏的控制器（初始化时需创建并传入PersistentBottomNavBar）
final _controller = PersistentNavBarController();

ListTile(
  title: const Text('联系我们'),
  onTap: () {
    Navigator.pop(context);
    // 切换到联系我们页面的索引（假设是3）
    _controller.index = 3;
  },
)