Flutter中如何避免切换标签时隐藏的Stateful Widget被销毁？

你遇到的问题核心是Visibility组件在visible为false时，会将子组件从Widget树中完全移除，导致StatefulWidget的dispose()被调用，状态丢失。要实现类似桌面标签页的效果——保留所有组件状态仅显示当前激活项，可以用以下几种方案：

方案1：使用IndexedStack（最推荐，适配标签页场景） #

IndexedStack会一次性创建所有子组件，但仅显示指定index对应的组件，其他组件会被隐藏但保留在Widget树中，状态不会被销毁，完美匹配你的标签页需求：

// 替换原来的Column为IndexedStack
IndexedStack(
  index: _index, // 当前激活的标签索引
  children: [
    WidgetOne(),
    WidgetOne(),
    WidgetOne(),
  ],
)

标签栏的代码可以保持不变，点击时更新_index即可切换显示的标签页，所有WidgetOne的状态都会被保留。

方案2：使用Offstage组件 #

Offstage仅控制组件的可见性，不会将其从Widget树中移除，因此子组件的状态会被保留。但要注意，Offstage隐藏的组件仍然会占用布局空间：

Column(
  children: [
    for (int i=0; i < 3; i++)
      Offstage(
        offstage: i != _index, // 非当前索引的组件隐藏
        child: WidgetOne(),
      )
  ]
)

如果你的标签页高度一致，这种方案可以直接使用；如果需要隐藏后不占空间，可能需要结合SizeBox动态控制尺寸，但复杂度会增加。

方案3：使用Opacity + IgnorePointer #

通过将透明度设为0隐藏组件，同时用IgnorePointer阻止交互，同样能保留组件状态。和Offstage一样，隐藏的组件仍会占用布局空间：

Column(
  children: [
    for (int i=0; i < 3; i++)
      Opacity(
        opacity: i == _index ? 1 : 0,
        child: IgnorePointer(
          ignoring: i != _index,
          child: WidgetOne(),
        ),
      )
  ]
)

额外提示 #

你原来的代码中Visibility的属性拼写有误，应该是visible而非visibile，这个小错误也可能导致异常，需要注意修正。

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