Flutter ListView内Post组件调用setState无法触发重绘问题求解

• islike被声明为footer方法内的局部变量，每次setState触发组件重绘时，都会重新执行footer方法，直接用data['likes']的原始值重新计算islike，setState中修改的局部islike值会被直接覆盖，无法生效。
• Firestore点赞操作写法错误：新增点赞时直接把likes字段赋值为单个用户邮箱，而非追加到数组中，会导致likes字段从数组变为字符串，后续contains判断完全失效。
• 取消点赞的判断条件写为赋值操作islike = true，而非等值判断islike == true，存在逻辑错误。
• 在State构造函数中重复存储widget的data参数，不符合Flutter开发规范，后续widget更新时State中存储的data不会同步更新，应该直接使用widget.data获取参数。

将islike提升为State类的成员变量，在初始化时赋值，同时修正Firestore操作逻辑，修复后的完整代码如下：

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

// 类名遵循Dart大驼峰命名规范
class Post extends StatefulWidget {
  final DocumentSnapshot data;
  Post(this.data);
  @override
  _PostState createState() => _PostState();
}

class _PostState extends State<Post> {
  // 将点赞状态提升为State成员变量
  late bool isLike;
  late String currentUserEmail;

  @override
  void initState() {
    super.initState();
    // 初始化时提前获取当前用户邮箱，避免重复读取
    currentUserEmail = Provider.of<google>(context, listen: false).Currentuser.email;
    // 初始化点赞状态
    isLike = widget.data['likes'].contains(currentUserEmail);
  }

  // 把footer方法移到build外，避免每次重绘重复声明函数
  Widget footer() {
    return Container(
      child: Row(
        children: [
          IconButton(
            onPressed: () {
              final postRef = FirebaseFirestore.instance.collection('post').doc(widget.data['postid']);
              if (!isLike) {
                // 新增点赞用arrayUnion追加元素到数组，不要直接覆盖字段
                postRef.update({
                  'likes': FieldValue.arrayUnion([currentUserEmail])
                });
                setState(() {
                  isLike = true;
                });
              } else {
                // 取消点赞用arrayRemove移除数组元素
                postRef.update({
                  'likes': FieldValue.arrayRemove([currentUserEmail])
                });
                setState(() {
                  isLike = false;
                });
              }
            },
            icon: Icon(
              Icons.volunteer_activism,
              color: isLike ? Colors.pink : Colors.white,
            ),
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          footer(),
        ],
      ),
    );
  }
}

如果需要实现多端点赞状态同步，可以改用StreamBuilder监听对应文档的实时更新，自动同步最新的点赞状态。

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