如何在iOS Swift中实现评论与回复系统

针对你遇到的问题，我们可以通过数据层级结构化 + 自定义TableViewCell的方式来完美实现评论和回复的展示，下面一步步来拆解实现过程：

1. 定义数据模型 #

首先我们需要把API返回的JSON转换成Swift模型，方便后续处理。创建一个Review结构体，遵循Codable协议来自动解析JSON：

struct Review: Codable {
    let firstName: String
    let lastName: String
    let profilePic: String
    let reviewId: Int
    let userId: Int
    let rating: Int
    let description: String
    let parentReviewId: Int
    let bookingId: Int
    let createdDate: String
    // 其他你需要用到的字段可以按需添加
}

2. 扁平化数据转层级结构 #

API返回的是扁平数组，我们需要把它转换成主评论包含回复数组的结构，这样后续TableView的逻辑会更清晰。我们可以创建一个ParentReview模型来承载主评论和对应的回复：

struct ParentReview {
    let mainReview: Review
    var replies: [Review] = []
}

// 转换扁平数组为层级结构的函数
func convertToHierarchicalReviews(from flatReviews: [Review]) -> [ParentReview] {
    // 先筛选出所有主评论（parentReviewId == 0的就是主评论）
    let parentReviews = flatReviews.filter { $0.parentReviewId == 0 }
    
    // 为每个主评论匹配对应的回复：回复的parentReviewId等于主评论的reviewId，且属于同一个booking
    return parentReviews.map { parent in
        let matchedReplies = flatReviews.filter {
            $0.parentReviewId == parent.reviewId && $0.bookingId == parent.bookingId
        }
        return ParentReview(mainReview: parent, replies: matchedReplies)
    }
}

调用这个函数后，你就得到了按主评论分组、每个组包含对应回复的数组，后续TableView的数据源就用这个数组。

3. TableView数据源实现 #

这里提供两种常用的实现思路，你可以根据UI需求选择：

思路1：使用分组TableView（每个组对应一个主评论+回复） #

这种方式逻辑最清晰，每个组的第一行是主评论Cell，后面的行是回复Cell：

注册自定义Cell

// 在viewDidLoad中注册两种Cell
tableView.register(MainReviewCell.self, forCellReuseIdentifier: "MainReviewCell")
tableView.register(ReplyReviewCell.self, forCellReuseIdentifier: "ReplyReviewCell")

数据源方法实现

var hierarchicalReviews: [ParentReview] = [] // 这是转换后的层级数据源

// 分组数量等于主评论的数量
override func numberOfSections(in tableView: UITableView) -> Int {
    return hierarchicalReviews.count
}

// 每组的行数：主评论1行 + 该主评论的回复数量
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    let parentReview = hierarchicalReviews[section]
    return 1 + parentReview.replies.count
}

// 返回对应Cell
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let parentReview = hierarchicalReviews[indexPath.section]
    
    if indexPath.row == 0 {
        // 主评论Cell
        let cell = tableView.dequeueReusableCell(withIdentifier: "MainReviewCell", for: indexPath) as! MainReviewCell
        let mainReview = parentReview.mainReview
        // 配置Cell内容：头像、用户名、评论内容、评分、回复按钮等
        cell.profileImageView.image = UIImage(named: mainReview.profilePic)
        cell.nameLabel.text = "\(mainReview.firstName) \(mainReview.lastName)"
        cell.reviewTextLabel.text = mainReview.description
        cell.ratingControl.rating = mainReview.rating
        // 回复按钮点击事件：用tag传递主评论ID
        cell.replyButton.addTarget(self, action: #selector(replyButtonTapped(_:)), for: .touchUpInside)
        cell.replyButton.tag = mainReview.reviewId
        return cell
    } else {
        // 回复Cell
        let replyReview = parentReview.replies[indexPath.row - 1]
        let cell = tableView.dequeueReusableCell(withIdentifier: "ReplyReviewCell", for: indexPath) as! ReplyReviewCell
        // 配置回复Cell，通常回复Cell会有左侧缩进样式
        cell.profileImageView.image = UIImage(named: replyReview.profilePic)
        cell.nameLabel.text = "\(replyReview.firstName) \(replyReview.lastName)"
        cell.replyTextLabel.text = replyReview.description
        return cell
    }
}

// 回复按钮点击事件处理
@objc func replyButtonTapped(_ sender: UIButton) {
    let targetReviewId = sender.tag
    // 这里处理回复逻辑：比如弹出输入框，输入完成后调用API提交回复
    print("准备回复评论ID：\(targetReviewId)")
}

思路2：单个Section，主评论和回复依次排列 #

如果不想用分组，也可以把所有行放在一个Section里，通过计算总行数来实现：

// 计算总行数：所有主评论数 + 所有回复数
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return hierarchicalReviews.reduce(0) { $0 + 1 + $1.replies.count }
}

// 找到对应行的评论数据
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    var currentRow = 0
    for parentReview in hierarchicalReviews {
        // 匹配主评论行
        if currentRow == indexPath.row {
            let cell = tableView.dequeueReusableCell(withIdentifier: "MainReviewCell", for: indexPath) as! MainReviewCell
            // 配置主评论Cell...
            return cell
        }
        currentRow += 1
        
        // 匹配回复行
        for reply in parentReview.replies {
            if currentRow == indexPath.row {
                let cell = tableView.dequeueReusableCell(withIdentifier: "ReplyReviewCell", for: indexPath) as! ReplyReviewCell
                // 配置回复Cell...
                return cell
            }
            currentRow += 1
        }
    }
    return UITableViewCell()
}

4. 自定义Cell注意事项 #

• 主评论Cell：需要包含头像、用户名、评分、评论内容、回复按钮，布局上可以更突出，比如增加底部分割线或者背景色区分。
• 回复评论Cell：布局上可以设置左侧缩进（比如通过contentView的leading约束增加20-30pt的偏移），样式上可以更简洁，不需要评分和回复按钮（如果不需要嵌套回复的话）。
• 记得在Cell类中定义对应的UI组件，比如UIImageView、UILabel、UIButton等，并做好约束。

5. 提交新回复后的界面刷新 #

当用户提交新回复后，你需要：

1. 调用API提交回复并确认成功
2. 把新的回复数据添加到对应的主评论的replies数组中
3. 调用tableView.reloadData()或者更精准的reloadSections/insertRows方法来刷新界面，避免全量刷新的卡顿

这样一套流程下来，就能完美实现你需要的评论和回复展示系统了。

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