如何在Flutter ChangeNotifier Provider中维护页面状态

问题核心是页面每次重建时局部状态被重置，要解决这个问题，必须把商品的购物车/心愿单状态托管到全局的ChangeNotifier中，而非页面的局部变量里。以下是具体实现步骤：

1. 创建全局状态管理类 #

定义一个继承自ChangeNotifier的类，专门维护购物车和心愿单的商品ID集合，包含状态变更的方法：

import 'package:flutter/foundation.dart';

class CartWishlistManager extends ChangeNotifier {
  // 用Set存储商品ID，避免重复添加
  final Set<String> _cartItemIds = {};
  final Set<String> _wishlistItemIds = {};

  // 对外暴露只读的状态
  Set<String> get cartItemIds => _cartItemIds;
  Set<String> get wishlistItemIds => _wishlistItemIds;

  // 判断商品是否在购物车
  bool isInCart(String productId) => _cartItemIds.contains(productId);
  // 判断商品是否在心愿单
  bool isInWishlist(String productId) => _wishlistItemIds.contains(productId);

  // 添加到购物车
  void addToCart(String productId) {
    _cartItemIds.add(productId);
    notifyListeners(); // 通知监听者更新UI
  }

  // 从购物车移除
  void removeFromCart(String productId) {
    _cartItemIds.remove(productId);
    notifyListeners();
  }

  // 添加到心愿单
  void addToWishlist(String productId) {
    _wishlistItemIds.add(productId);
    notifyListeners();
  }

  // 从心愿单移除
  void removeFromWishlist(String productId) {
    _wishlistItemIds.remove(productId);
    notifyListeners();
  }
}

2. 在APP顶层注册Provider #

把CartWishlistManager注册为全局Provider，确保所有页面都能访问：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CartWishlistManager(),
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '电商Demo',
      home: const HomePage(),
    );
  }
}

3. 商品详情页中使用全局状态 #

在商品详情页，不再用本地变量存储状态，而是直接从全局Provider获取当前商品的状态，并绑定按钮交互：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class ProductDetailPage extends StatelessWidget {
  final String productId;
  final String productName;

  const ProductDetailPage({
    super.key,
    required this.productId,
    required this.productName,
  });

  @override
  Widget build(BuildContext context) {
    // 获取全局状态管理器
    final cartWishlistManager = Provider.of<CartWishlistManager>(context);
    // 当前商品的状态
    final isInCart = cartWishlistManager.isInCart(productId);
    final isInWishlist = cartWishlistManager.isInWishlist(productId);

    return Scaffold(
      appBar: AppBar(title: Text(productName)),
      body: Column(
        children: [
          // 商品信息区域（示例）
          const SizedBox(height: 40),
          Text('商品ID：$productId', style: const TextStyle(fontSize: 18)),
          const SizedBox(height: 40),
          
          ElevatedButton(
            onPressed: () {
              if (isInCart) {
                cartWishlistManager.removeFromCart(productId);
              } else {
                cartWishlistManager.addToCart(productId);
              }
            },
            child: Text(isInCart ? '已加入购物车' : '加入购物车'),
          ),
          const SizedBox(height: 16),
          ElevatedButton(
            onPressed: () {
              if (isInWishlist) {
                cartWishlistManager.removeFromWishlist(productId);
              } else {
                cartWishlistManager.addToWishlist(productId);
              }
            },
            child: Text(isInWishlist ? '已加入心愿单' : '加入心愿单'),
          ),
        ],
      ),
    );
  }
}

4. 可选：持久化状态到本地（避免重启丢失） #

如果需要APP重启后仍保留状态，可以结合shared_preferences把集合数据持久化：

import 'package:flutter/foundation.dart';
import 'package:shared_preferences/shared_preferences.dart';

class CartWishlistManager extends ChangeNotifier {
  final Set<String> _cartItemIds = {};
  final Set<String> _wishlistItemIds = {};
  static const String _cartKey = 'cart_items';
  static const String _wishlistKey = 'wishlist_items';

  CartWishlistManager() {
    // 初始化时从本地读取数据
    _loadFromStorage();
  }

  Future<void> _loadFromStorage() async {
    final prefs = await SharedPreferences.getInstance();
    final cartIds = prefs.getStringList(_cartKey) ?? [];
    final wishlistIds = prefs.getStringList(_wishlistKey) ?? [];
    _cartItemIds.addAll(cartIds);
    _wishlistItemIds.addAll(wishlistIds);
    notifyListeners();
  }

  Future<void> _saveToStorage() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setStringList(_cartKey, _cartItemIds.toList());
    await prefs.setStringList(_wishlistKey, _wishlistItemIds.toList());
  }

  // 重写状态变更方法，每次变更后保存到本地
  void addToCart(String productId) {
    _cartItemIds.add(productId);
    _saveToStorage();
    notifyListeners();
  }

  void removeFromCart(String productId) {
    _cartItemIds.remove(productId);
    _saveToStorage();
    notifyListeners();
  }

  // 心愿单方法同理
  void addToWishlist(String productId) {
    _wishlistItemIds.add(productId);
    _saveToStorage();
    notifyListeners();
  }

  void removeFromWishlist(String productId) {
    _wishlistItemIds.remove(productId);
    _saveToStorage();
    notifyListeners();
  }
}

这样处理后，无论从哪个入口进入商品详情页，都会从全局Provider读取最新的状态，不会出现每次进入都重置为初始状态的问题。

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