Flutter中如何仅增减ListView内点击的商品数量

我正在开发一款购物应用，期望实现点击商品对应的加减按钮时，仅增减该商品的数量。但当前使用Provider实现的逻辑中，点击任一按钮都会改变所有商品的计数，相关代码如下：

ListView代码 #

ListView.separated(
                    physics: const BouncingScrollPhysics(),
                    shrinkWrap: true,
                    itemCount: categoryList[index].dishCategory.length,
                    itemBuilder: (context, i) {
                      final data = categoryList[index].dishCategory[i];
                      return DishDetailsWidget(
                        data: data,
                        onAdd: () {
                          provider.increment();
                        },
                        onRemove: () {
                          provider.decrement();
                        },
                      );
                    },
                    separatorBuilder: (context, index) =>
                        const Divider(height: 5),
                  )

Provider代码 #

class CartProvider extends ChangeNotifier {
  int counter = 0;

  increment() {
    counter++;
    notifyListeners();
  }

  decrement() {
    if (counter == 0) {
      counter;
    } else {
      counter--;
    }
    notifyListeners();
  }
}

问题根源 #

当前Provider用单个counter变量存储所有商品的数量，所有商品共享同一计数，导致点击任意按钮都会全局改变数值。需要改为按商品唯一标识独立管理每个商品的数量。

修改方案 #

1. 重构CartProvider代码

将单个计数器改为Map结构，用商品唯一ID作为键，对应数量作为值，实现每个商品的独立计数：

class CartProvider extends ChangeNotifier {
  // 用Map存储每个商品的数量，键为商品唯一ID，值为对应数量
  Map<String, int> itemCounts = {};

  // 增加指定商品的数量，传入商品唯一ID
  increment(String itemId) {
    // 商品不存在则初始化为0，再加1；已存在则直接累加
    itemCounts[itemId] = (itemCounts[itemId] ?? 0) + 1;
    notifyListeners();
  }

  // 减少指定商品的数量，传入商品唯一ID
  decrement(String itemId) {
    if (itemCounts[itemId] != null && itemCounts[itemId]! > 0) {
      itemCounts[itemId] = itemCounts[itemId]! - 1;
      notifyListeners();
    }
  }

  // 获取指定商品的当前数量，无记录则返回0
  int getItemCount(String itemId) {
    return itemCounts[itemId] ?? 0;
  }
}

2. 修改ListView的调用逻辑

在调用加减方法时传入当前商品的唯一ID，并将对应数量传递给DishDetailsWidget：

ListView.separated(
  physics: const BouncingScrollPhysics(),
  shrinkWrap: true,
  itemCount: categoryList[index].dishCategory.length,
  itemBuilder: (context, i) {
    final data = categoryList[index].dishCategory[i];
    // 假设商品模型有唯一标识字段id，比如data.id
    final itemId = data.id;
    return DishDetailsWidget(
      data: data,
      onAdd: () {
        provider.increment(itemId);
      },
      onRemove: () {
        provider.decrement(itemId);
      },
      // 传入当前商品的实时数量
      count: provider.getItemCount(itemId),
    );
  },
  separatorBuilder: (context, index) => const Divider(height: 5),
)

3. 调整DishDetailsWidget（适配数量显示）

确保Widget接收count参数并正确显示：

class DishDetailsWidget extends StatelessWidget {
  final Dish data; // 你的商品模型类
  final VoidCallback onAdd;
  final VoidCallback onRemove;
  final int count;

  const DishDetailsWidget({
    super.key,
    required this.data,
    required this.onAdd,
    required this.onRemove,
    required this.count,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Text(data.name),
        IconButton(onPressed: onRemove, icon: const Icon(Icons.remove)),
        Text('$count'),
        IconButton(onPressed: onAdd, icon: const Icon(Icons.add)),
      ],
    );
  }
}

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