Flutter中TabBarView滑动时Tab Bar指示器颜色不更新问题

你的代码核心问题是只在点击Tab时更新了pos变量，但滑动TabBarView时没有监听TabController的索引变化，同时混用DefaultTabController和自定义TabController导致状态管理混乱。以下是修复后的完整代码：

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class TestDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {

  late TabController controller;
  int pos = 0;

  @override
  void initState() {
    super.initState();
    // 初始化TabController，绑定vsync和标签数量
    controller = TabController(length: 3, vsync: this);
    // 监听控制器索引变化，同步更新pos
    controller.addListener(() {
      if (controller.index != pos) {
        setState(() {
          pos = controller.index;
        });
      }
    });
  }

  @override
  void dispose() {
    // 销毁控制器，避免内存泄漏
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        bottom: TabBar(
          controller: controller,
          onTap: (int index) {
            setState(() {
              pos = index;
            });
          },
          unselectedLabelColor: Color(0xFF82868a),
          labelColor: Colors.white,
          indicatorSize: TabBarIndicatorSize.label,
          indicator: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            color: Colors.black,
          ),
          tabs: [
            Tab(
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8),
                  color: pos == 0 ? Colors.transparent : const Color(0xFFf6f6f6),
                ),
                child: const Align(
                  alignment: Alignment.center,
                  child: Text("New"),
                ),
              ),
            ),
            Tab(
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8),
                  color: pos == 1 ? Colors.transparent : Color(0xFFf6f6f6),
                ),
                child: Align(
                  alignment: Alignment.center,
                  child: Text("Confirmed"),
                ),
              ),
            ),
            Tab(
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8),
                  color: pos == 2 ? Colors.transparent : Color(0xFFf6f6f6),
                ),
                child: Align(
                  alignment: Alignment.center,
                  child: Text("In Transits"),
                ),
              ),
            ),
          ],
        ),
      ),
      body: TabBarView(
        controller: controller,
        dragStartBehavior: DragStartBehavior.down,
        children: [
          Icon(Icons.apps),
          Icon(Icons.movie),
          Icon(Icons.games),
        ],
      ),
    );
  }
}

关键改动说明： #

1. 初始化并监听TabController：在initState里创建控制器，通过addListener监听索引变化，一旦索引改变就更新pos并刷新UI，这样滑动TabBarView时Tab颜色会同步变化。
2. 移除DefaultTabController：自定义控制器已经能管理Tab状态，不需要再用默认控制器，避免状态冲突。
3. 销毁控制器：在dispose方法中销毁TabController，防止内存泄漏。
4. 统一控制器引用：确保TabBar和TabBarView都使用同一个controller，保证状态联动。

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