Flutter结合Cloud Firestore实现Instagram克隆项目帖子评论区功能

现有问题梳理 #

• 跳转评论页时没有传递当前对应帖子的唯一标识，导致评论页无法关联到对应帖子
• 评论提交逻辑有误，当前是直接向users集合下名为photoURL的固定文档写入评论，完全没有和对应帖子绑定
• 现有数据库结构将用户信息和帖子内容都存在users集合，入门阶段可以先沿用，后续优化可拆分users（存用户信息）和posts（存帖子内容）两个集合提升扩展性

代码修改步骤 #

1. 修改评论页接收参数 #

给CommentSection组件新增参数，用于接收从Feed页传递过来的帖子文档ID：

class CommentSection extends StatefulWidget {
  // 新增参数：当前评论对应的帖子文档ID
  final String postDocId;
  const CommentSection({Key? key, required this.postDocId}) : super(key: key);

  @override
  _CommentSectionState createState() => _CommentSectionState();
}

2. 修改Feed页跳转逻辑 #

在FeedScreen的评论按钮点击事件中，把当前帖子的文档ID传递给评论页：

IconButton(
  icon: Icon(
    Icons.mode_comment_outlined,
    color: Colors.white,
  ),
  onPressed: () {
    Navigator.push(context,
    MaterialPageRoute(
      builder: (context) =>
          CommentSection(postDocId: doc.id), // 传入当前帖子的文档ID
    ));
  },
)

3. 修改评论提交逻辑 #

调整sendComment方法，将评论写入对应帖子的子集合中：

sendComment() async {
  // 校验表单合法再提交
  if (!_formKey.currentState!.validate()) return;
  _formKey.currentState!.save();
  
  // 将评论写入当前帖子的comments子集合
  await FirebaseFirestore.instance
      .collection('users')
      .doc(widget.postDocId)
      .collection('comments')
      .add({
    'content': comments, // 评论内容
    'commenterName': user!.displayName ?? '匿名用户', // 评论人昵称
    'commenterUid': user!.uid, // 评论人UID
    'createTime': FieldValue.serverTimestamp(), // 评论时间，用服务端时间避免本地时间误差
  });
  
  // 提交成功后清空输入框
  _formKey.currentState!.reset();
}

可选：评论列表展示 #

如果需要在评论页展示历史评论，在CommentSection的布局中添加StreamBuilder即可：

// 放在表单上方或者下方都可以
Expanded(
  child: StreamBuilder<QuerySnapshot>(
    stream: FirebaseFirestore.instance
        .collection('users')
        .doc(widget.postDocId)
        .collection('comments')
        .orderBy('createTime', descending: true)
        .snapshots(),
    builder: (context, snapshot) {
      if (!snapshot.hasData) {
        return Center(child: CircularProgressIndicator());
      }
      final comments = snapshot.data!.docs;
      return ListView.builder(
        itemCount: comments.length,
        itemBuilder: (context, index) {
          final comment = comments[index];
          return ListTile(
            title: Text(
              comment['commenterName'],
              style: TextStyle(color: Colors.white),
            ),
            subtitle: Text(
              comment['content'],
              style: TextStyle(color: Colors.white70),
            ),
          );
        },
      );
    },
  ),
)

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