点击Persistent Bottom NavBar Item返回父页面的实现方案

要实现点击底部导航栏项直接回到对应父页面（无论当前在哪个子页面），核心是重置当前Tab的导航栈，具体修改如下：

1. 添加导航项点击回调，重置当前Tab栈 #

在PersistentTabView配置中加入onItemSelected回调，当点击已选中的导航项时，清空该Tab的所有子页面，回到初始父页面：

return PersistentTabView(
  context,
  controller: _controller,
  screens: screens.map((screen) => screen()).toList(),
  items: _navBarsItems(),
  // 新增导航项点击回调
  onItemSelected: (index) {
    // 点击当前活跃的Tab时，重置其导航栈到根页面
    if (index == _controller.index) {
      Navigator.of(testContext).popUntil((route) => route.isFirst);
    }
  },
  // 修改返回键逻辑：优先回退子页面
  onWillPop: (final context) async {
    final currentNavigator = Navigator.of(context!);
    if (currentNavigator.canPop()) {
      currentNavigator.pop();
      return false;
    }
    // 根页面时可自定义退出逻辑（比如双击退出）
    return true;
  },
  selectedTabScreenContext: (final context) {
    testContext = context!;
  },
  // 原有其他配置保留...
);

2. 确保子页面在当前Tab的导航栈内跳转 #

所有父页面跳转到子页面时，必须使用当前页面的Navigator（而非全局Navigator），保证子页面属于当前Tab的导航栈：

比如在HomeScreen中跳转SettingsScreen：

// 正确跳转方式
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const SettingsScreen()),
);

原理说明 #

• selectedTabScreenContext会实时获取当前活跃Tab的导航上下文，通过它可以操作该Tab独立的导航栈。
• popUntil((route) => route.isFirst)会将导航栈回退到最顶层的父页面，实现类似Instagram的点击Tab返回首页效果。
• 修改onWillPop后，返回键会优先回退子页面，再处理根页面的退出逻辑，符合常规交互预期。

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