Flutter购物车数量增减与价格计算异常问题求助

问题1：点击单个商品数量按钮，所有商品数量同步变化 #

原因 #

所有购物车项共用一个全局的_quantity变量，修改这个变量时，ListView里的所有项会重新渲染并使用同一个值，导致所有商品数量同步变化。

解决方法 #

给每个购物车商品单独维护数量，用Map<String, int>存储商品ID对应的数量，确保每个商品有独立的数量状态。

问题2：价格计算异常（显示为字符串拼接结果） #

原因 #

Firestore中存储的productprice是字符串类型，直接和_quantity相乘时会触发字符串拼接而非数值运算，比如"100" * 2会得到"100100"。

解决方法 #

先将productprice转换为数值类型（int或double），再进行乘法计算。

修改后的完整代码 #

// 替换原有的int _quantity=1;
Map<String, int> _quantities = {};

@override
Widget build(BuildContext context) {
  return StreamBuilder(
    stream: FirebaseFirestore.instance
        .collection("Cart")
        .where("id", isEqualTo: FirebaseAuth.instance.currentUser!.uid)
        .snapshots(),
    builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
      if (!snapshot.hasData) {
        return Center(
          child: LoadingAnimationWidget.staggeredDotsWave(
              color: Colors.red, size: 100),
        );
      }

      // 初始化每个商品的数量为1（未存储时）
      for (var doc in snapshot.data!.docs) {
        final productId = doc.id; // 用文档ID作为商品唯一标识，可替换为自定义商品ID字段
        if (!_quantities.containsKey(productId)) {
          _quantities[productId] = 1;
        }
      }

      return ListView.builder(
        itemCount: snapshot.data!.docs.length,
        itemBuilder: (context, index) {
          final doc = snapshot.data!.docs[index];
          final productId = doc.id;
          final productPrice = int.parse(doc["productprice"].toString()); // 转换为数值类型
          final currentQuantity = _quantities[productId] ?? 1;

          return Padding(
            padding: const EdgeInsets.all(8.0),
            child: Card(
              child: Container(
                child: Row(
                  children: [
                    Row(
                      children: [
                        Text(
                          "${productPrice * currentQuantity}",
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 16,
                          ),
                        ),
                        SizedBox(width: 16),
                        IconButton(
                          icon: Icon(Icons.remove),
                          onPressed: () {
                            setState(() {
                              if (currentQuantity > 1) {
                                _quantities[productId] = currentQuantity - 1;
                              }
                            });
                          },
                        ),
                        SizedBox(width: 8),
                        Text(
                          "$currentQuantity",
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 16,
                          ),
                        ),
                        SizedBox(width: 8),
                        IconButton(
                          icon: Icon(Icons.add),
                          onPressed: () {
                            setState(() {
                              _quantities[productId] = currentQuantity + 1;
                            });
                          },
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          );
        },
      );
    },
  );
}

额外说明 #

• 若商品有自定义的唯一标识字段（如productId），可替换代码中的doc.id为该字段，确保数量映射准确。
• 若productprice是小数，将int.parse改为double.parse即可适配。

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