Flutter点击BottomNavigationBar对应TabItem如何关闭标签内子页面

问题根因 #

你当前的底部导航逻辑只处理了Tab切换的状态更新，每个Tab对应的页面持有独立的嵌套路由栈，点击已激活Tab时没有对该栈做弹出子页面的操作，导致子页面不会关闭。

具体实现步骤 #

1. 为TabItem新增独立导航键 #

修改TabItem类，为每个Tab绑定专属的GlobalKey<NavigatorState>，用于获取对应Tab的路由栈控制权限：

class TabItem {
  final String label;
  final String icon;
  final bool maintainState;
  final String root;
  final Widget page;
  // 新增属性：当前Tab专属导航键
  final GlobalKey<NavigatorState> navigatorKey;

  TabItem({
    required this.label,
    required this.icon,
    required this.maintainState,
    required this.root,
    required this.page,
    GlobalKey<NavigatorState>? navigatorKey,
  }) : navigatorKey = navigatorKey ?? GlobalKey<NavigatorState>();
}

2. 每个Tab根页面绑定导航键 #

你当前每个Tab的page属性对应的根页面需要嵌套Navigator组件，并且绑定上面对应的navigatorKey，示例如下：

// 示例：构建搜索Tab的根页面
Widget buildSearchTab(GlobalKey<NavigatorState> navKey) {
  return Navigator(
    key: navKey,
    initialRoute: 'search',
    onGenerateRoute: (settings) {
      switch (settings.name) {
        case 'search':
          return MaterialPageRoute(builder: (_) => SearchRootPage());
        case 'search/detail':
          return MaterialPageRoute(builder: (_) => SearchDetailPage());
        // 其他子路由配置
        default:
          return MaterialPageRoute(builder: (_) => SearchRootPage());
      }
    },
  );
}

// 初始化tabs列表时传入对应导航键
final List<TabItem> tabs = [
    TabItem(
      label: '-',
      icon: 'assets/bottom/search.svg',
      maintainState: false,
      root: 'search',
      // 传入绑定了导航键的页面
      page: buildSearchTab(GlobalKey<NavigatorState>()),
    ),
    // 其他Tab同理配置
];

3. 修改selectTab逻辑，新增子页面弹出处理 #

优化selectTab方法，新增点击当前激活Tab时的路由栈重置逻辑，同时删掉原代码中冗余的判断条件：

void selectTab(int index, {Map? arguments}) {
  // 场景1：点击当前已激活的Tab
  if (index == TabNavigator.currentTab.value) {
    final currentNavKey = tabs[index].navigatorKey;
    // 判断当前Tab路由栈存在可弹出的子页面
    if (currentNavKey.currentState?.canPop() ?? false) {
      // 弹出所有子页面直到回到根页面
      currentNavKey.currentState?.popUntil((route) => route.isFirst);
      return;
    }
    // 已处于根页面时，执行原有的父页面刷新逻辑即可
    print('当前Tab已处于根页面，执行父页面刷新');
    setState(() {
      // 原有父页面刷新逻辑
    });
    return;
  }
  // 场景2：点击其他未激活Tab，走原有切换逻辑
  setState(() {
    TabNavigator.currentTab.value = index;
  });
}

备选简化方案 #

如果你没有使用嵌套Navigator实现Tab内路由，也可以通过全局状态管理记录每个Tab的子页面打开状态，点击当前Tab时触发状态更新，控制子页面的显隐即可，不过该方案适配性不如独立导航键方案，适合业务逻辑简单的场景。

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