Flutter中TabBar的onTap调用setState不生效问题

问题原因 #

你遇到的问题是TabBarView会缓存未显示的页面，当切换标签页并调用setState重置状态时，缓存页面没有使用最新状态重建，导致切回原标签页时按钮仍保持高亮。

解决方案1：给TabBarView子组件添加动态Key #

通过给每个标签页的根组件添加依赖状态的Key，强制Flutter在状态变化时重建组件，确保样式更新：

import 'package:flutter/material.dart';

void main() {
  runApp(const TabBarDemo());
}

class TabBarDemo extends StatefulWidget {
  const TabBarDemo({super.key});

  @override
  State<TabBarDemo> createState() => _TabBarDemoState();
}

class _TabBarDemoState extends State<TabBarDemo> {
  int state = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: const [
                Tab(text: 'One'),
                Tab(text: 'Two'),
              ],
              onTap: (value) {
                setState(() => state = 0);
              },
            ),
            title: const Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              // 添加依赖state的动态Key
              Center(
                key: ValueKey('tab1-$state'),
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: (state == 1) ? Colors.blue : Colors.grey,
                  ),
                  onPressed: () {
                    setState(() => state = 1);
                  },
                  child: const Text('One'),
                ),
              ),
              // 添加依赖state的动态Key
              Center(
                key: ValueKey('tab2-$state'),
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: (state == 2) ? Colors.blue : Colors.grey,
                  ),
                  onPressed: () {
                    setState(() => state = 2);
                  },
                  child: const Text('Two'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

解决方案2：使用TabController监听标签页切换 #

替换DefaultTabController为自定义TabController，监听标签页切换完成事件后重置状态，确保状态更新时机正确：

import 'package:flutter/material.dart';

void main() {
  runApp(const TabBarDemo());
}

class TabBarDemo extends StatefulWidget {
  const TabBarDemo({super.key});

  @override
  State<TabBarDemo> createState() => _TabBarDemoState();
}

class _TabBarDemoState extends State<TabBarDemo> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  int state = 0;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
    // 监听标签页切换完成事件
    _tabController.addListener(() {
      if (!_tabController.indexIsChanging) {
        setState(() => state = 0);
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            controller: _tabController,
            tabs: const [
              Tab(text: 'One'),
              Tab(text: 'Two'),
            ],
          ),
          title: const Text('Tabs Demo'),
        ),
        body: TabBarView(
          controller: _tabController,
          children: [
            Center(
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: (state == 1) ? Colors.blue : Colors.grey,
                ),
                onPressed: () {
                  setState(() => state = 1);
                },
                child: const Text('One'),
              ),
            ),
            Center(
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: (state == 2) ? Colors.blue : Colors.grey,
                ),
                onPressed: () {
                  setState(() => state = 2);
                },
                child: const Text('Two'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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