Flutter购物车商品数量独立增减：解决按钮相互影响问题

问题根源在于当前的QuantitySelector维护的是全局单一的数量状态，所有商品的选择器共享同一个Provider实例，导致操作一个商品的数量会同步影响其他商品。下面提供两种可行的修复方案：

方案一：用Map存储每个商品的数量（推荐，适合购物车全局管理） #

这种方式通过商品ID区分不同商品的数量，既能保证每个商品独立控制数量，也方便后续统一获取所有商品的数量（比如计算总价）。

修改Provider类 #

import 'package:flutter/material.dart';

class QuantitySelector extends ChangeNotifier {
  // 以商品ID为键，存储对应商品的数量
  final Map<String, int> _productQuantities = {};

  // 获取指定商品的数量，默认初始值为1
  int getQuantity(String productId) => _productQuantities[productId] ?? 1;

  void quantityIncreament(String productId) {
    final currentQty = getQuantity(productId);
    if (currentQty < 20) {
      _productQuantities[productId] = currentQty + 1;
      notifyListeners();
    }
  }

  void quantityDecreament(String productId) {
    final currentQty = getQuantity(productId);
    if (currentQty > 1) {
      _productQuantities[productId] = currentQty - 1;
      notifyListeners();
    }
  }

  bool canDecreament(String productId) => getQuantity(productId) > 1;
}

修改数量选择器组件 #

给组件添加商品ID参数，确保操作对应商品的数量：

import 'package:flutter/material.dart';
import 'package:maxtastore/Provider/quantity_selector.dart';
import 'package:provider/provider.dart';

import 'product_quantity_selector.dart';

class ProductQuantitySelectorRow extends StatelessWidget {
  // 新增商品ID参数，用于区分不同商品
  final String productId;
  
  const ProductQuantitySelectorRow({super.key, required this.productId});

  @override
  Widget build(BuildContext context) {
    return Consumer<QuantitySelector>(
      builder: (context, value, child) {
        final currentQty = value.getQuantity(productId);
        return Row(
          children: [
            ProductQuantitySelector(
              margin: const EdgeInsets.only(right: 10),
              symbol: '-',
              onTap: () => value.quantityDecreament(productId),
            ),
            Text(currentQty.toString()),
            ProductQuantitySelector(
              margin: const EdgeInsets.only(left: 10),
              symbol: '+',
              onTap: () => value.quantityIncreament(productId),
            )
          ],
        );
      },
    );
  }
}

在购物车列表中使用 #

传入对应商品的ID即可：

ListView.builder(
  itemCount: cartProducts.length,
  itemBuilder: (context, index) {
    final product = cartProducts[index];
    return ListTile(
      title: Text(product.name),
      // 传入当前商品的ID
      trailing: ProductQuantitySelectorRow(productId: product.id),
    );
  },
)

方案二：给每个商品单独创建Provider实例 #

如果不需要全局统一管理数量，也可以给每个商品项单独分配一个QuantitySelector实例，这样每个选择器的状态完全独立：

购物车列表修改 #

ListView.builder(
  itemCount: cartProducts.length,
  itemBuilder: (context, index) {
    // 每个商品项单独创建Provider实例
    return ChangeNotifierProvider(
      create: (_) => QuantitySelector(),
      child: ListTile(
        title: Text(cartProducts[index].name),
        trailing: const ProductQuantitySelectorRow(),
      ),
    );
  },
)

这种方式不需要修改原来的QuantitySelector和ProductQuantitySelectorRow代码，但缺点是无法直接从全局获取所有商品的数量，适合简单场景。

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