Flutter Provider实现页面切换时Count变量重置为1的问题

问题根源在于当前的Count实例是跨页面共享的，切换页面后之前的数值会被保留。以下是两种可行的解决方案：

方案一：添加重置方法，在页面初始化时调用 #

1. 首先在Count类中新增重置count的方法：

class Count with ChangeNotifier {
  int _count = 1;

  int get count => _count;

  // 新增重置方法
  void resetCount() {
    _count = 1;
    notifyListeners();
  }

  void setCount(bool isIncrement) {
    if (isIncrement) {
      _count = checkCount(_count + 1);
    } else {
      _count = checkCount(_count - 1);
      print("decrement" + _count.toString());
    }
    notifyListeners();
  }

  int checkCount(int count) {
    if (count < 0) {
      return 0;
    } else if (count > 10) {
      return 10;
    } else {
      return count;
    }
  }
}

2. 在食品页面的状态类中，利用initState方法在页面初始化时调用重置方法：

class _HamburgerState extends State<Hamburger> {
  @override
  void initState() {
    super.initState();
    // 调用重置方法，listen设为false避免不必要的监听
    Provider.of<Count>(context, listen: false).resetCount();
  }

  @override
  Widget build(BuildContext context) {
    Color coloricon = Provider.of<iconcolor>(context).coloricon;
    int count = Provider.of<Count>(context).count;
    return Scaffold(
      // ... 原有页面内容
    );
  }
}

方案二：为每个页面单独创建Count实例 #

如果不需要跨页面共享count数值，可以为每个食品页面单独创建Count实例，每次进入页面都会初始化新的实例，默认count为1：

修改Hamburger页面的代码，移除构造函数中的count参数，并在状态类中本地创建Count实例：

class Hamburger extends StatefulWidget {
  const Hamburger({super.key}); // 移除required Count count参数

  @override
  State<Hamburger> createState() => _HamburgerState();
}

class _HamburgerState extends State<Hamburger> {
  late final Count _localCount;

  @override
  void initState() {
    super.initState();
    // 为当前页面创建独立的Count实例
    _localCount = Count();
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider.value(
      value: _localCount,
      child: Scaffold(
        // ... 页面内容，使用Consumer获取count值
        body: Consumer<Count>(
          builder: (context, count, child) {
            return Column(
              children: [
                Text("当前数量：${count.count}"),
                ElevatedButton(
                  onPressed: () => count.setCount(true),
                  child: const Text("增加"),
                ),
                ElevatedButton(
                  onPressed: () => count.setCount(false),
                  child: const Text("减少"),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

这种方式下，每个页面的count都是独立的，切换页面后新页面的count会自动初始化为1。

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