Flutter购物车数量增减异常求助（Provider状态管理）

问题说明 #

• 基于Provider开发商品购物车功能，需求：点击+按钮增加商品数量，点击-按钮减少数量，推荐商品默认数量设为1
• 异常表现：设置初始数量为1后，第一次点击+按钮UI无更新，第二次点击才显示数量变为2；日志显示实际默认数量为0，第一次点击后数量变为1但UI未同步，第二次点击后数量变为2才更新
• 补充需求：默认数量为1时，点击-按钮将数量变为0并禁用减按钮

问题根源 #

1. 初始数量被强制覆盖：CartProvider的addProduct方法中，新添加商品时设置product.quantity = 0，直接覆盖了Product模型默认的quantity = 1，导致实际初始数量为0
2. 状态更新不同步：updateQuantity方法中，修改cartItems中商品对象的属性后，未同步更新传入的product对象的对应属性，而UI直接使用传入的product属性展示，导致状态不一致
3. 减按钮逻辑不完整：未处理数量为1时点击减按钮的完整逻辑，包括数量更新和按钮禁用状态的同步

修复方案 #

1. 修改cart_provider.dart #

import 'package:flutter/material.dart';
import '../models/product_model.dart';

class CartProvider with ChangeNotifier {
  List<Product> cartItems = [];

  void addProduct(Product product) {
    // 改用productId判断商品是否存在，比productName更准确
    final existingProductIndex = cartItems.indexWhere((p) => p.productId == product.productId);
    if (existingProductIndex != -1) {
      cartItems[existingProductIndex].quantity++;
      // 同步传入商品的状态，确保UI展示一致
      product.quantity = cartItems[existingProductIndex].quantity;
      product.isDecrementButtonDisabled = false;
    } else {
      // 新商品默认数量设为1，符合需求
      product.quantity = 1;
      product.isDecrementButtonDisabled = false;
      cartItems.add(product);
    }
    notifyListeners();
  }

  void updateQuantity(Product product, bool isIncrement) {
    final existingProductIndex = cartItems.indexWhere((p) => p.productId == product.productId);
    if (existingProductIndex != -1) {
      if (isIncrement && cartItems[existingProductIndex].quantity < 99) {
        cartItems[existingProductIndex].quantity++;
        // 同步状态到传入的product对象
        product.quantity = cartItems[existingProductIndex].quantity;
        product.isDecrementButtonDisabled = false;
      } else if (!isIncrement) {
        cartItems[existingProductIndex].quantity--;
        // 同步状态到传入的product对象
        product.quantity = cartItems[existingProductIndex].quantity;
        // 处理减按钮禁用逻辑：数量为0时禁用，否则启用
        product.isDecrementButtonDisabled = cartItems[existingProductIndex].quantity == 0;
      }
    } else {
      addProduct(product);
    }
    notifyListeners();
  }
}

2. 优化ProductCard.dart（更严谨的状态获取） #

从购物车中获取商品的实时状态，避免直接依赖传入的product对象导致的状态不一致：

import 'package:flutter/material.dart';
import 'package:greenbii_app/providers/cart_provider.dart';
import 'package:intl/intl.dart';
import 'package:provider/provider.dart';

import '../constants/constants.dart';
import '../models/product_model.dart';

class ProductCard extends StatelessWidget {
  final Product product;

  const ProductCard({
    Key? key,
    required this.product,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    NumberFormat currencyFormat = NumberFormat.currency(
      locale: 'en_NG',
      name: 'naira',
      symbol: '₦',
    );
    return Consumer<CartProvider>(
      builder: (context, cartProvider, child) {
        // 获取购物车中当前商品的状态，不存在则使用原始商品的初始状态
        final currentProduct = cartProvider.cartItems.firstWhere(
          (p) => p.productId == product.productId,
          orElse: () => product,
        );
        return Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    product.productName,
                    overflow: TextOverflow.ellipsis,
                    style: const TextStyle(
                      color: AppColors.textColor,
                      fontSize: 16.0,
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                  Text(
                    product.descriptions,
                    overflow: TextOverflow.ellipsis,
                    style: const TextStyle(
                      color: AppColors.disabledColor,
                      fontSize: 12.0,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  const SizedBox(height: 10.0),
                  Text(
                    currencyFormat.format(double.parse(product.amount)),
                    overflow: TextOverflow.ellipsis,
                    style: const TextStyle(
                      color: AppColors.primaryColor,
                      fontSize: 18.0,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                ],
              ),
            ),
            Row(
              children: [
                IconButton(
                  onPressed: currentProduct.isDecrementButtonDisabled
                      ? null
                      : () => context.read<CartProvider>().updateQuantity(product, false),
                  icon: const Icon(Icons.remove),
                ),
                const SizedBox(width: 10.0),
                Text(currentProduct.quantity.toString()),
                const SizedBox(width: 10.0),
                IconButton(
                  onPressed: () => context.read<CartProvider>().updateQuantity(product, true),
                  icon: const Icon(Icons.add),
                ),
              ],
            )
          ],
        );
      },
    );
  }
}

3. 明确Product模型初始值（可选） #

class Product {
  final int productId;
  final String productName;
  final String descriptions;
  final String amount;
  bool isDecrementButtonDisabled;
  int quantity;

  Product({
    required this.productId,
    required this.productName,
    required this.descriptions,
    required this.amount,
    // 明确设置初始状态，避免歧义
    this.isDecrementButtonDisabled = false,
    this.quantity = 1,
  });

  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is Product &&
          runtimeType == other.runtimeType &&
          productId == other.productId;

  @override
  int get hashCode => productId.hashCode;
}

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