Flutter TabBar拖拽切换时图标颜色不更新问题求助

问题根源 #

你当前仅在TabBar的onTap回调里更新index变量，但手指拖拽切换Tab时不会触发onTap事件，导致index无法同步更新，图标颜色自然不会跟着切换。

解决方案：使用TabController监听切换状态 #

通过TabController统一监听Tab的切换行为（不管是点击还是拖拽），同步更新index变量，就能让图标颜色正常响应所有切换操作。

完整修改代码 #

1. 首先让页面State混入SingleTickerProviderStateMixin，并声明TabController：

class _YourPageState extends State<YourPage> with SingleTickerProviderStateMixin {
  int index = 0;
  late TabController _tabController; // 声明TabController

  @override
  void initState() {
    super.initState();
    // 初始化Controller，length对应Tab的数量
    _tabController = TabController(length: 2, vsync: this);
    // 添加监听，同步更新index
    _tabController.addListener(() {
      if (_tabController.index != index) {
        setState(() {
          index = _tabController.index;
        });
      }
    });
  }

  @override
  void dispose() {
    _tabController.dispose(); // 销毁Controller，避免内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return [
            SliverOverlapAbsorber(
              handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              sliver: SliverAppBar(
                pinned: true,
                floating: true,
                automaticallyImplyLeading: false,
                forceElevated: innerBoxIsScrolled,
                bottom: TabBar(
                  controller: _tabController, // 绑定Controller
                  // 移除原来的onTap回调
                  tabs: [
                    Tab(
                      icon: SizedBox(
                        height: 25,
                        child: Image.asset(
                          AppImages.fix,
                          color: index == 0 ? Colors.white : Colors.blue,
                        ),
                      ),
                    ),
                    Tab(
                      icon: SizedBox(
                        height: 25,
                        child: Image.asset(
                          AppImages.home,
                          color: index == 1 ? Colors.white : Colors.blue,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ];
        },
        body: TabBarView(
          controller: _tabController, // TabBarView也要绑定同一个Controller
          children: [
            // 你的第一个Tab页面内容
            Container(),
            // 你的第二个Tab页面内容
            Container(),
          ],
        ),
      ),
    );
  }
}

修改说明 #

• 用TabController替代onTap的手动更新，不管是点击Tab还是拖拽切换，都会触发监听回调同步index
• 必须给TabBarView也绑定同一个TabController，确保Tab切换和页面内容同步
• 记得在dispose里销毁TabController，避免内存泄漏

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