Flutter复用同个Stateful Widget时的状态初始化与保持问题

你的问题核心在于两个点：同类型Widget复用导致initState不重复触发，以及Tab切换时页面被自动dispose，下面直接给出解决方案：

1. 核心方案：给每个Tab页面加唯一Key + 启用状态保持 #

步骤1：改造Tab页面Widget，混入状态保持Mixin #

让每个Tab页面的State类混入AutomaticKeepAliveClientMixin，这样切换Tab时页面不会被dispose，同时确保initState能在第一次创建时触发：

class MyTabItem extends StatefulWidget {
  final String tabParam; // 每个Tab的唯一参数
  const MyTabItem({super.key, required this.tabParam});

  @override
  State<MyTabItem> createState() => _MyTabItemState();
}

class _MyTabItemState extends State<MyTabItem> with AutomaticKeepAliveClientMixin {
  // 开启状态保持，禁止Tab切换时销毁页面
  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    super.initState();
    // 这里的逻辑只会在页面第一次创建时执行
    print("Tab ${widget.tabParam} initState 执行");
  }

  @override
  void dispose() {
    // 只会在整个父页面退出时执行
    print("Tab ${widget.tabParam} dispose 执行");
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 必须调用super.build，否则AutomaticKeepAlive不生效
    super.build(context);
    return Center(child: Text('当前Tab参数：${widget.tabParam}'));
  }
}

步骤2：主页面循环生成Tab时添加唯一Key #

在TabBarView循环生成Widget时，给每个MyTabItem添加基于参数的唯一Key，让Flutter识别为不同的Widget实例，避免状态复用：

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

  @override
  State<TabBarMainPage> createState() => _TabBarMainPageState();
}

class _TabBarMainPageState extends State<TabBarMainPage> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  // 示例参数列表
  final List<String> tabParams = ["参数1", "参数2", "参数3"];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: tabParams.length, vsync: this);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: _tabController,
          tabs: tabParams.map((param) => Tab(text: "Tab $param")).toList(),
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: tabParams.map((param) {
          // 用参数作为ValueKey，确保每个Widget实例唯一
          return MyTabItem(
            key: ValueKey(param),
            tabParam: param,
          );
        }).toList(),
      ),
    );
  }
}

2. 关键原理说明 #

• 添加唯一Key：Flutter通过runtimeType和key判断是否复用旧Widget状态。如果循环生成同类型Widget不加key，Flutter会认为是同一个Widget，复用之前的状态，导致initState只执行一次。用ValueKey（基于每个Tab的唯一参数）可以强制Flutter创建新的Widget实例，触发各自的initState。
• AutomaticKeepAliveClientMixin：默认TabBarView会将非当前页面的Widget从Widget树中移除并调用dispose，混入这个Mixin并设置wantKeepAlive: true，可以让页面保持挂载状态，直到整个父页面销毁时才会执行dispose。

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