如何让DefaultTabController在手势开始时触发监听器解决滞后问题

DefaultTabController默认的监听器只会在Tab切换动画完成后触发，这是因为其内部监听的是动画完成事件，要实现手势开始拖动就触发监听器，可按以下两种方案实现：

方案1：监听TabBarView滚动通知触发逻辑 #

• 给DefaultTabController的子组件TabBarView包裹NotificationListener，监听ScrollStartNotification事件，手势按下开始拖动时就会触发该通知
• 触发时直接通过DefaultTabController.of(context)获取控制器实例，读取即将切换的索引值，执行对应逻辑
  示例代码如下：

NotificationListener<ScrollStartNotification>(
  onNotification: (notification) {
    final controller = DefaultTabController.of(context);
    // 拖动开始时直接获取目标索引，提前触发逻辑
    if (controller.indexIsChanging) {
      int targetIndex = controller.nextIndex;
      // 此处写入原本要在监听器中执行的代码
      debugPrint('手势开始，即将切换到Tab $targetIndex');
    }
    return false;
  },
  child: const TabBarView(
    children: [
      Tab1Page(),
      Tab2Page(),
      Tab3Page()
    ],
  ),
)

方案2：自定义TabController监听动画值变化 #

• 弃用默认的DefaultTabController，自行实例化TabController，直接监听其animation的数值变化，而非监听默认的索引变化事件
• 当animation值偏移超过阈值时即可判定为开始切换，提前触发逻辑
  示例代码如下：

late TabController _tabController;

@override
void initState() {
  super.initState();
  _tabController = TabController(length: 3, vsync: this);
  _tabController.animation?.addListener(() {
    double animValue = _tabController.animation!.value;
    int targetIndex = animValue.round();
    // 动画值偏移超过0.1即判定为开始切换，可根据业务调整阈值
    if ((animValue - _tabController.index).abs() > 0.1) {
      debugPrint('手势开始拖动，目标Tab索引为$targetIndex');
    }
  });
}

@override
void dispose() {
  _tabController.dispose();
  super.dispose();
}

两种方案都可同时覆盖滑动切换、点击TabBar切换两种场景，无需额外适配点击事件。

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