Flutter TabBar：如何在标签切换动画中执行请求而非切换完成后

你当前的_onTabChanged回调中通过!_tabController.indexIsChanging做了判断，直接把切换动画执行过程中的所有回调全部排除了。indexIsChanging属性为true的阶段，正是Tab从旧位置过渡到新位置的全过程；等它变回false的时候，动画已经完全走完，新Tab已经完整显示在屏幕上，这时候再发起Bloc数据请求，自然会出现新标签先短暂展示旧标签内容的体验问题。

完全不需要自定义手势或额外监听动画，直接利用TabController自带的状态能力，在切换动画刚启动、目标Tab已经完全确定的瞬间，提前触发数据请求，让数据加载和切换动画并行执行即可。

核心逻辑改造 #

修改_onTabChanged方法，取消对动画完成状态的强依赖，在切换启动的第一时间计算目标Tab并触发事件：

void _onTabChanged() {
  // 进入切换动画阶段时，目标Tab已经完全确定
  if (_tabController.indexIsChanging) {
    // 通过动画的实时进度，计算最终停留的目标Tab下标
    final targetIndex = _tabController.animation!.value.round();
    // 仅当目标Tab和当前激活Tab不一致时，才触发Bloc事件，避免重复请求
    if (targetIndex != activeTab) {
      activeTab = targetIndex;
      context
          .read<SoundBloc>()
          .add(GetSounds(categoryId: (targetIndex + 1).toString()));
    }
  }
}

初始化逻辑优化 #

去掉initState里硬编码的首个分类请求的重复逻辑，保证状态一致性：

@override
void initState() {
  super.initState();
  activeTab = 0;
  _tabController = TabController(
    vsync: this,
    length: widget.categories.length,
    initialIndex: activeTab,
  );
  // 首次加载直接触发初始分类的请求，不依赖监听回调
  context.read<SoundBloc>().add(GetSounds(categoryId: (activeTab + 1).toString()));
  _tabController.addListener(_onTabChanged);
}

改造后整个交互流程和切换动画完全并行：

• 用户触发Tab切换的第一瞬间，就会根据目标分类ID向Bloc发起数据请求
• 从旧Tab到新Tab的动画执行全流程中，Bloc正在后台完成缓存读取、网络请求流程
• 等动画走完、新Tab完全展示在屏幕上时，对应分类的数据已经加载完成，不会出现短暂闪烁旧内容的问题
• 即使用户滑动到一半取消切换、往回拉到原Tab，实时计算的targetIndex也会和最终停留位置完全匹配，配合Bloc本身的事件去重逻辑，不会产生多余的网络请求开销。

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