Flutter ListView未正确重建，新增评论继承旧评论状态问题

你遇到的是Flutter列表中StatefulWidget复用导致的状态错乱问题：

• CommentListTile为Stateful组件，点赞状态isLiked、likeCount存储在自身State中，initState仅在组件首次创建时执行一次
• 你构建的ListView没有给每个CommentListTile设置唯一Key，Flutter渲染时会复用同类型的旧组件，刷新评论列表后，复用的组件不会重新读取新的comment属性更新状态，就会出现新增评论继承上一条点赞状态的问题

第一步：给列表项添加唯一Key #

在buidlCommentWidgets方法中构造CommentListTile时，传入与评论绑定的唯一Key，示例代码：

List<Widget> buidlCommentWidgets() {
  List<Widget> commentWidgetList = [];
  for (var i = 0; i < data.length; i++) {
    commentWidgetList.add(Padding(
      padding: const EdgeInsets.symmetric(vertical: 0.0, horizontal: 8.0),
      child: CommentListTile(
        key: ValueKey(data[i].commentId), // 新增此行，用评论唯一ID作为Key
        comment: data[i],
        postUid: widget.postedUid,
      ),
    ));
  }
  return commentWidgetList;
}

Key会让Flutter正确识别不同的评论项，不会跨评论复用组件，从根源避免状态串位。

第二步（可选，兼容后续局部更新场景） #

如果后续有评论数据局部刷新的需求，可以在_CommentListTileState中添加didUpdateWidget生命周期回调，保证组件绑定的评论属性变化时自动同步本地状态：

@override
void didUpdateWidget(covariant CommentListTile oldWidget) {
  super.didUpdateWidget(oldWidget);
  if (oldWidget.comment.commentId != widget.comment.commentId ||
      oldWidget.comment.isLikedByViewer != widget.comment.isLikedByViewer ||
      oldWidget.comment.likesCount != widget.comment.likesCount) {
    setState(() {
      isLiked = widget.comment.isLikedByViewer;
      likeCount = widget.comment.likesCount;
    });
  }
}

完成第一步即可解决你当前遇到的问题，第二步属于优化项可按需添加。

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