如何在切换内容时避免Flutter StatefulWidget的State被销毁？

你当前的实现中，每次切换_selectedIndex触发setState时，未选中的Widget会被从Widget树中移除，对应的State也就随之销毁。除了使用Navigator.push，以下几种方法可以避免这个问题：

1. 使用IndexedStack（最推荐的简便方案） #

IndexedStack会将所有子Widget都保留在Widget树中，仅展示当前索引对应的内容，所有子Widget的State都能保持存活状态。修改你的代码如下：

class _nameState extends State<name> {
  int _selectedIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        NavigationRail(
          onDestinationSelected: (value) {
            setState(() {
              _selectedIndex = value;
            });
          },
          destinations: [
            NavigationRailDestination(icon: Icon(Icons.abc), label: Text('0')),
            NavigationRailDestination(icon: Icon(Icons.ac_unit), label: Text('1')),
          ],
          selectedIndex: _selectedIndex,
        ),
        // 替换原Builder部分为IndexedStack，外层加Expanded占满剩余空间
        Expanded(
          child: IndexedStack(
            index: _selectedIndex,
            children: const [
              testcontent(),
              Container(child: Text('页面1内容')),
            ],
          ),
        ),
      ],
    );
  }
}

2. 提前缓存Widget实例 #

在父State中提前初始化所有内容页面的实例，切换时直接返回已创建的实例，而不是每次重新构建新的Widget，这样State会被持续保留：

class _nameState extends State<name> {
  int _selectedIndex = 0;
  // 提前初始化所有页面的实例
  final List<Widget> _pageInstances = [
    testcontent(),
    Container(child: Text('页面1内容')),
  ];

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        NavigationRail(...), // 保留原NavigationRail代码
        Expanded(
          child: _pageInstances[_selectedIndex],
        ),
      ],
    );
  }
}

3. 使用AutomaticKeepAliveClientMixin #

如果仅需要特定页面保持State存活，可以在子Widget的State中混入这个mixin，让Widget自动维持存活状态：

修改testcontent的代码：

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

  @override
  State<testcontent> createState() => _testcontentState();
}

class _testcontentState extends State<testcontent> with AutomaticKeepAliveClientMixin {
  // 返回true表示需要保持Widget存活
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    // 必须调用super.build(context)，否则keepAlive不生效
    super.build(context);
    return Center(
      child: Expanded(child: TextFormField()),
    );
  }
}

注意：这个方案需要配合不会移除Widget的切换逻辑（比如IndexedStack或缓存实例），如果Widget被完全从树中移除，这个mixin无法阻止State销毁。

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