Flutter路由跳转后如何保存页面状态 返回后setState修改内容丢失怎么解决

默认情况下Flutter的普通路由入栈时，旧页面组件会被销毁，返回时重新初始化，因此之前通过setState修改的本地状态会全部丢失，你可以根据自己的业务场景选择以下方案实现状态保持：

方案1：使用AutomaticKeepAliveClientMixin（最常用） #

适合绝大多数页面状态保持场景，用法如下：

• 让页面对应的State类混入AutomaticKeepAliveClientMixin
• 重写wantKeepAlive属性返回true
• 在build方法中调用super.build(context)

示例代码：

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

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> with AutomaticKeepAliveClientMixin {
  // 示例状态：通过setState修改的计数
  int _count = 0;

  // 重写该属性返回true，标识当前页面需要保持状态
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    // 必须调用父类build方法
    super.build(context);
    return Scaffold(
      body: Center(child: Text("当前计数：$_count")),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => _count++),
        child: const Icon(Icons.add),
      ),
    );
  }
}

方案2：使用IndexedStack #

适合固定多页面切换的场景（比如底部导航栏切换页面），IndexedStack会一次性渲染所有子页面，只会控制页面显隐不会销毁组件，天然支持状态保持。缺点是首次加载时开销较高，不适合页面数量过多的场景。
示例代码：

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentNavIndex = 0;
  // 所有需要切换的页面列表
  final List<Widget> _pages = const [PageA(), PageB(), PageC()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 用IndexedStack包裹页面列表
      body: IndexedStack(
        index: _currentNavIndex,
        children: _pages,
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentNavIndex,
        onTap: (index) => setState(() => _currentNavIndex = index),
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
          BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: "我的"),
        ],
      ),
    );
  }
}

方案3：使用状态管理工具 #

如果你的页面逻辑复杂、需要跨页面共享状态，可以用Provider、Bloc、GetX等状态管理工具，把页面的状态存储在组件之外的独立存储空间中，页面重建时直接从存储空间读取状态即可恢复，不会受组件销毁的影响。

方案4：路由参数回传恢复 #

仅适合两个页面跳转的简单场景，跳转新页面时接收路由返回值，回到旧页面时把需要恢复的状态通过Navigator.pop回传，再调用setState恢复即可。
示例代码：

// 旧页面跳转逻辑
onTap: () async {
  // 接收新页面返回的状态
  final backState = await Navigator.push(context, MaterialPageRoute(builder: (context) => const SecondPage()));
  if(backState != null) {
    setState(() {
      // 用返回值恢复当前页面的状态
      _myLocalState = backState;
    });
  }
}

// 新页面返回逻辑
onBack: () {
  // 回传需要保留的状态
  Navigator.pop(context, _needSaveState);
}

注意事项 #

上述方案都是针对应用运行时的状态保持，如果需要在应用退出重启后仍然保留状态，需要配合shared_preferences、本地数据库等持久化存储方案，每次页面初始化时读取本地存储的内容恢复状态。

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