Flutter+Firebase杂货APP：购物车数量无法实时显示到Text组件

核心问题分析 #

你当前的代码存在两个关键问题导致数量无法更新显示：

1. 使用get()单次读取Firestore数据，购物车数据变化后无法自动触发UI刷新
2. 即使获取到数量值，没有通知Flutter框架重建UI；同时查询逻辑冗余，无需遍历所有购物车文档再逐个获取

解决方案代码实现 #

以下是修改后的完整grocery_list组件代码，优化了购物车增删逻辑，并通过StreamBuilder实现数量实时显示：

// 确保grocery_list是StatefulWidget，或者在父组件传递用户邮箱
class GroceryItem extends StatefulWidget {
  final AsyncSnapshot snapshot;
  final int index;
  final BuildContext context;
  final dynamic values45;

  const GroceryItem({
    Key? key,
    required this.snapshot,
    required this.index,
    required this.context,
    required this.values45,
  }) : super(key: key);

  @override
  State<GroceryItem> createState() => _GroceryItemState();
}

class _GroceryItemState extends State<GroceryItem> {
  String? _userEmail;

  @override
  void initState() {
    super.initState();
    _loadUserEmail();
  }

  // 提前获取当前用户邮箱，避免在Stream中异步操作
  void _loadUserEmail() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      _userEmail = prefs.getString("email");
    });
  }

  @override
  Widget build(BuildContext context) {
    final groceryId = widget.snapshot.data?.docs[widget.index].reference.id;
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        // 减号按钮：减少数量或删除商品
        InkWell(
          child: const Icon(FontAwesomeIcons.minus),
          onTap: () async {
            if (_userEmail == null || groceryId == null) return;

            final cartQuery = await FirebaseFirestore.instance
                .collection("Cart")
                .where("grocery_id", isEqualTo: groceryId)
                .where("email", isEqualTo: _userEmail)
                .get();

            if (cartQuery.docs.isNotEmpty) {
              final cartDoc = cartQuery.docs.first;
              final currentQty = int.parse(cartDoc.data()['quantity']);
              if (currentQty > 1) {
                await cartDoc.reference.update({
                  "quantity": (currentQty - 1).toString()
                });
              } else {
                await cartDoc.reference.delete();
              }
            }
          },
        ),

        const VerticalDivider(width: 10),

        // 实时显示购物车数量的StreamBuilder
        StreamBuilder<QuerySnapshot>(
          stream: _userEmail == null || groceryId == null
              ? const Stream.empty()
              : FirebaseFirestore.instance
                  .collection("Cart")
                  .where("grocery_id", isEqualTo: groceryId)
                  .where("email", isEqualTo: _userEmail)
                  .snapshots(),
          builder: (context, cartSnapshot) {
            if (!cartSnapshot.hasData) return const Text("0");
            int totalQty = 0;
            cartSnapshot.data!.docs.forEach((doc) {
              totalQty += int.parse(doc.data()['quantity']);
            });
            return Text(totalQty.toString());
          },
        ),

        const VerticalDivider(width: 10),

        // 加号按钮：新增商品或增加数量
        InkWell(
          child: const Icon(FontAwesomeIcons.plus),
          onTap: () async {
            if (_userEmail == null || groceryId == null) return;

            final cartQuery = await FirebaseFirestore.instance
                .collection("Cart")
                .where("grocery_id", isEqualTo: groceryId)
                .where("email", isEqualTo: _userEmail)
                .get();

            if (cartQuery.docs.isNotEmpty) {
              // 已有商品，增加数量
              final cartDoc = cartQuery.docs.first;
              final currentQty = int.parse(cartDoc.data()['quantity']);
              await cartDoc.reference.update({
                "quantity": (currentQty + 1).toString()
              });
            } else {
              // 无该商品，新增购物车记录
              final dataToSave = {
                "grocery_id": groceryId,
                "quantity": "1",
                "email": _userEmail,
                "name": widget.snapshot.data!.docs[widget.index]['name'],
                "price": widget.snapshot.data!.docs[widget.index]['price'],
                "si": widget.snapshot.data!.docs[widget.index]['si'],
                "image": widget.snapshot.data!.docs[widget.index]['image'],
              };
              await FirebaseFirestore.instance.collection("Cart").add(dataToSave);
            }
          },
        ),
      ],
    );
  }
}

关键改进说明 #

1. 实时数据监听：用StreamBuilder替代单次get()，购物车数据变化时自动触发UI刷新
2. 用户数据隔离：添加email过滤条件，确保只统计当前用户的购物车商品
3. 优化购物车逻辑：
   • 加号按钮：先检查商品是否已存在，存在则增加数量，不存在再新增记录
   • 减号按钮：数量大于1时减少数量，等于1时删除记录，符合常规购物车交互
4. 提前获取用户信息：在组件初始化时获取用户邮箱，避免Stream中异步操作导致的异常

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