Flutter：如何检测当前已选中的Tab被再次点击的事件

默认TabController的addListener仅会在Tab索引发生变更时触发回调，点击当前已选中的Tab不会触发索引变化，因此无法通过原有监听实现需求，直接通过TabBar自带的onTap回调即可实现：

核心实现步骤 #

• 给TabBar组件配置onTap参数，回调会返回用户点击的Tab索引
• 在回调内判断点击的索引是否等于controller.index，相等即代表用户点击了当前已激活的Tab
• 若索引为首页对应的索引（通常为0），执行页面滚动到顶部的逻辑即可

代码示例 #

// 假设你已提前实例化TabController controller，以及首页滚动控制器ScrollController scrollController
Scaffold(
  appBar: AppBar(
    bottom: TabBar(
      controller: controller,
      // 新增onTap回调
      onTap: (int tappedIndex) {
        if (tappedIndex == controller.index) {
          // 命中点击已激活Tab的场景
          if (tappedIndex == 0) {
            // 首页Tab被重复点击，执行滚顶逻辑
            scrollController.animateTo(
              0,
              duration: Duration(milliseconds: 300),
              curve: Curves.easeInOut,
            );
          }
        }
      },
      tabs: [
        Tab(text: "首页"),
        Tab(text: "分类"),
        Tab(text: "我的"),
      ],
    ),
  ),
  // 其余页面代码保持不变
)

注意事项 #

• 如果你使用的是底部导航BottomNavigationBar，逻辑完全一致，直接复用onTap回调做相同判断即可
• 原有TabController的监听逻辑无需删除，可正常保留用于处理Tab切换的业务逻辑

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