Flutter路由跳转后如何保留页面A的收藏图标等修改状态

问题根因：要么是状态变量定义位置错误（放在build方法内，页面每次重建都会重置），要么是跳转时页面A被销毁重建，没有做状态持久化存储。

方案1：页面State类维护状态（适用普通路由跳转场景） #

• 首先确保收藏状态变量定义在State类下，禁止放在build方法内部
• 普通Navigator.push跳转新页面时，页面A会保留在路由栈中不会销毁，返回时状态自动留存
• 示例代码：

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

  @override
  State<PageA> createState() => _PageAState();
}

class _PageAState extends State<PageA> {
  // 状态变量必须定义在State类中
  bool _isFavorited = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IconButton(
        icon: Icon(
          Icons.favorite,
          color: _isFavorited ? Colors.red : Colors.grey,
        ),
        onPressed: () {
          setState(() {
            _isFavorited = !_isFavorited;
          });
        },
      ),
    );
  }
}

方案2：全局状态管理（适用页面会被销毁/多页面共享状态场景） #

如果使用Navigator.pushReplacement跳转、Tab栏切换页面等场景会销毁页面A，或者收藏状态需要在多个页面同步，可以用全局状态管理方案（Provider、Riverpod、Bloc、GetX均可），以Provider为例：

• 第一步：定义全局状态类

class FavoriteState extends ChangeNotifier {
  bool _isFavorited = false;
  bool get isFavorited => _isFavorited;

  void toggleFavorite() {
    _isFavorited = !_isFavorited;
    notifyListeners();
  }
}

• 第二步：在页面A中绑定状态

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Consumer<FavoriteState>(
      builder: (context, state, child) => IconButton(
        icon: Icon(
          Icons.favorite,
          color: state.isFavorited ? Colors.red : Colors.grey,
        ),
        onPressed: () => state.toggleFavorite(),
      ),
    ),
  );
}

• 全局状态生命周期和APP一致，只要APP不关闭，页面无论怎么重建状态都会同步。

方案3：本地持久化存储（适用APP重启后仍需保留状态场景） #

如果需要退出APP再打开仍然保留收藏状态，可以结合SharedPreferences做本地持久化：

class _PageAState extends State<PageA> {
  bool _isFavorited = false;

  @override
  void initState() {
    super.initState();
    // 页面初始化时读取本地存储的状态
    _loadFavoriteStatus();
  }

  // 读取本地存储的收藏状态
  _loadFavoriteStatus() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      _isFavorited = prefs.getBool('is_favorited') ?? false;
    });
  }

  // 切换收藏状态时同步更新本地存储
  _toggleFavorite() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      _isFavorited = !_isFavorited;
      prefs.setBool('is_favorited', _isFavorited);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IconButton(
        icon: Icon(
          Icons.favorite,
          color: _isFavorited ? Colors.red : Colors.grey,
        ),
        onPressed: () => _toggleFavorite(),
      ),
    );
  }
}

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