Flutter问题：DefaultTabController切换Tab时TabBar颜色未改变

你的代码存在几个关键问题导致选中标签颜色无法更新：

1. 错误使用StatelessWidget：你在StatelessWidget中重写了initState和dispose方法，这两个是StatefulWidget专属的生命周期方法，无状态组件无法触发状态更新。
2. TabController初始化时机错误：sizedTabBar在build方法开头就被创建，此时tabController还是null；后续在DefaultTabController的Builder中才给tabController赋值，但此时sizedTabBar已经构建完成，不会重新更新。
3. 状态未触发重建：即使tabController的索引变化，Stateless组件也不会自动重新build，导致UI无法同步更新。

1. 将组件改为StatefulWidget #

把TabHome从StatelessWidget改为StatefulWidget，这样才能管理状态并在tab切换时触发UI更新。

2. 正确监听TabController变化 #

在State类中获取DefaultTabController实例，添加监听器，当tab索引变化时调用setState触发UI重建。

3. 调整TabBar构建位置 #

把TabBar的构建逻辑放到DefaultTabController的Builder内部，确保tabController已经初始化完成，能正确获取当前索引。

4. 移除冲突的TabBar指示器配置 #

因为你用自定义Container的decoration实现选中样式，需要移除TabBar自带的indicator相关配置，避免样式冲突。

完整修复代码 #

class TabHome extends StatefulWidget {
  const TabHome({Key? key}) : super(key: key);

  @override
  State<TabHome> createState() => _TabHomeState();
}

class _TabHomeState extends State<TabHome> {
  TabController? tabController;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    tabController?.removeListener(_onTabChanged);
    super.dispose();
  }

  void _onTabChanged() {
    setState(() {}); // 触发UI重建，更新选中标签样式
  }

  @override
  Widget build(BuildContext context) {
    final screenWidth = getScreenWidth(context);
    final screenHeight = getScreenHeight(context);

    PreferredSizeWidget sizedAppBar = AppBar(
      title: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 你的AppBar内容
        ],
      ),
      bottom: PreferredSize(
        preferredSize: const Size.fromHeight(50.0),
        child: Container(
          alignment: Alignment.centerLeft,
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 你的AppBar底部内容
            ],
          ),
        ),
      ),
    );

    final mediaQuery = MediaQuery.of(context);
    final availableHeight = screenHeight - sizedAppBar.preferredSize.height - 50 - mediaQuery.padding.top; // 50对应TabBar高度

    return MultiBlocProvider(
      providers: [
        BlocProvider(
          create: (context) => TabBloc()..add(TabInitialEvent()),
        )
      ],
      child: MaterialApp(
        scrollBehavior: MyCustomScrollBehavior(),
        title: 'Tab Home',
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: sizedAppBar,
          body: SafeArea(
            child: Column(
              children: [
                const SizedBox(height: 3),
                DefaultTabController(
                  length: 4,
                  initialIndex: 0,
                  child: Builder(
                    builder: (context) {
                      tabController = DefaultTabController.of(context);
                      tabController?.addListener(_onTabChanged);
                      return Column(
                        children: <Widget>[
                          TabBar(
                            controller: tabController,
                            labelColor: textWhite1,
                            unselectedLabelColor: Colors.black,
                            isScrollable: true,
                            labelPadding: const EdgeInsets.symmetric(horizontal: 1),
                            tabs: [
                              Container(
                                width: mainTabWidth,
                                height: mainTabHeight,
                                decoration: BoxDecoration(
                                  color: tabController?.index == 0 ? highlightColor : normalColor,
                                  border: Border.all(color: level1Color6, width: 2, style: BorderStyle.solid),
                                  borderRadius: BorderRadius.circular(5),
                                ),
                                child: const Tab(
                                  child: Text(
                                    tab1,
                                    textAlign: TextAlign.center,
                                    style: TextStyle(fontSize: fontSize, fontWeight: FontWeight.bold),
                                  ),
                                ),
                              ),
                              Container(
                                width: mainTabWidth,
                                height: mainTabHeight,
                                decoration: BoxDecoration(
                                  color: tabController?.index == 1 ? highlightColor : normalColor,
                                  border: Border.all(color: level1Color6, width: 2, style: BorderStyle.solid),
                                  borderRadius: BorderRadius.circular(5),
                                ),
                                child: const Tab(
                                  child: Text(
                                    tab2,
                                    textAlign: TextAlign.center,
                                    style: TextStyle(fontSize: fontSize, fontWeight: FontWeight.bold),
                                  ),
                                ),
                              ),
                              Container(
                                width: mainTabWidth,
                                height: mainTabHeight,
                                decoration: BoxDecoration(
                                  color: tabController?.index == 2 ? highlightColor : normalColor,
                                  border: Border.all(color: level1Color6, width: 2, style: BorderStyle.solid),
                                  borderRadius: BorderRadius.circular(5),
                                ),
                                child: const Tab(
                                  child: Text(
                                    tab3,
                                    textAlign: TextAlign.center,
                                    style: TextStyle(fontSize: fontSize, fontWeight: FontWeight.bold),
                                  ),
                                ),
                              ),
                              Container(
                                width: mainTabWidth,
                                height: mainTabHeight,
                                decoration: BoxDecoration(
                                  color: tabController?.index == 3 ? highlightColor : normalColor,
                                  border: Border.all(color: level1Color6, width: 2, style: BorderStyle.solid),
                                  borderRadius: BorderRadius.circular(5),
                                ),
                                child: const Tab(
                                  child: Text(
                                    tab4,
                                    textAlign: TextAlign.center,
                                    style: TextStyle(fontSize: fontSize, fontWeight: FontWeight.bold),
                                  ),
                                ),
                              ),
                            ],
                          ),
                          Container(
                            height: availableHeight * 0.93,
                            decoration: const BoxDecoration(
                              border: Border(top: BorderSide(color: Colors.grey, width: 0.5)),
                            ),
                            child: TabBarView(
                              controller: tabController,
                              children: <Widget>[
                                Container(
                                  child: Column(
                                    children: [
                                      getFirstTab(screenWidth, screenHeight),
                                    ],
                                  ),
                                ),
                                const Center(
                                  child: Text('Display Tab 2', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
                                ),
                                Center(
                                  child: ElevatedButton(
                                    child: const Text('to Tab 3'),
                                    onPressed: () {
                                      print('Tab Now ${tabController?.index}');
                                      tabController?.animateTo(1);
                                    },
                                  ),
                                ),
                                const Center(
                                  child: Text('Display Tab 4', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
                                ),
                              ],
                            ),
                          ),
                        ],
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget getFirstTab(double screenWidth, double screenHeight) {
    return BlocBuilder<TabBloc, TabState>(
      builder: (context, state) {
        return Expanded(
          child: Scrollbar(
            controller: controller,
            child: ListView(
              controller: controller,
              shrinkWrap: true,
              children: [
                // 你的列表内容
              ],
            ),
          ),
        );
      },
    );
  }
}

关键修改点说明 #

• 改为StatefulWidget：允许管理组件状态，在tab切换时触发UI重建。
• 添加tab切换监听器：_onTabChanged方法中调用setState，确保每次tab切换时同步更新标签颜色。
• TabBar内联构建：将TabBar放到DefaultTabController的Builder内部，此时tabController已正确初始化，能获取当前选中索引。
• 移除TabBar指示器：避免自带指示器与自定义Container样式冲突。

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