Flutter中为Firestore生成的ListView每个条目设置独立计数器的实现方案

问题根因 #

你当前代码中所有列表项共用同一个页面级的counter变量，调用setState修改该变量后全页面刷新，所有条目读取同一个计数器值自然会同步变动。

解决方案 #

直接将计数器值存储在对应Firestore文档中，点击按钮时仅更新当前条目的文档数据，既可以实现各条目计数器独立，也天然满足你需要将数值回存Firestore的需求。

修改后的代码参考：

body: StreamBuilder(
    stream: FirebaseFirestore.instance
        .collection(globals.selectedKat)
        .snapshots(),
    builder:
        (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
      if (!snapshot.hasData) {
        return Center(child: CircularProgressIndicator());
      } else {
        return Padding(
          padding: const EdgeInsets.all(20.0),
          child: GridView.count(
            // 注意补充原代码缺失的crossAxisCount参数
            crossAxisCount: 2, // 根据你的实际需求调整数值
            children: snapshot.data.docs.map((document) {
              return Center(
                // [...] 保留你原有未贴出的代码
                child: Container(
                  // [...] 保留你原有未贴出的代码
                    child: Column(
                      children: [
                        Center(
                            child: Text(
                          document["titel"],
                        )),
                        Row(
                          children: [
                            IconButton(
                                onPressed: () {
                                  // 仅更新当前条目的count字段，数值+1
                                  document.reference.update({
                                    'count': FieldValue.increment(1)
                                  });
                                },
                                icon: Icon(Icons.add_circle_outline)),
                            Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text(
                                // 读取当前文档的count字段值，无此字段则默认显示0
                                (document.data() as Map).containsKey('count') ? document['count'].toString() : '0',
                                style: TextStyle(
                                    color: Colors.white, fontSize: 30),
                              ),
                            ),
                            IconButton(
                                iconSize: 40,
                                color: Colors.white,
                                onPressed: () {
                                  // 仅更新当前条目的count字段，数值-1
                                  document.reference.update({
                                    'count': FieldValue.increment(-1)
                                  });
                                },
                                icon: Icon(Icons.remove_circle_outline))
                          ],
                        )
                      ],
                    )),
              );
            }).toList(),
          ),
        );
      }
    }),

补充说明 #

• 使用FieldValue.increment做数值增减可以避免多端同时修改的并发冲突，比本地读值再写入的方案更安全
• 如果需要限制计数器最小值（比如不能低于0），可以在调用update前先判断当前document的count值，符合条件再执行更新操作
• 可根据需求在update方法后添加异常捕获逻辑，处理网络请求失败的场景

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