自定义UITableViewCell布局异常：图片与文本无法正常显示求助

自定义了一个UITableViewCell，内部包含emailText（邮箱文本）、postImageView（图片）和commentText（评论文本），遇到以下两个约束问题：

• 使用「重置为建议约束」时，单元格行高仅30-40左右，图片仅显示一小部分，邮箱和评论文本完全不可见
• 自行手动设置约束后，只能看到邮箱和评论文本，图片完全无法显示

相关代码 #

import UIKit
import Firebase
import FirebaseFirestore
import SDWebImage

class FeedsViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var tableView: UITableView!
    
    var postArray = [POST]()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self
        tableView.dataSource = self
        fetchFirebaseData()
    }
    
    func fetchFirebaseData() {
        let firestoreDatabase = Firestore.firestore()
        firestoreDatabase.collection("POST").order(by: "Date", descending: true).addSnapshotListener { snapshot, error in
            if error != nil {
                print(error?.localizedDescription)
            } else {
                if snapshot?.isEmpty != true && snapshot != nil {
                    self.postArray.removeAll()
                    
                    for document in snapshot!.documents {
                        if let imageURL = document.get("imageUrl") as? String,
                           let comment = document.get("comment") as? String,
                           let email = document.get("email") as? String {
                            let post = POST(email: email, comment: comment, image: imageURL)
                            self.postArray.append(post)
                        }
                    }
                    
                    self.tableView.reloadData()
                }
            }
        }
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return postArray.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! FeedCell
        cell.emailText.text = postArray[indexPath.row].email
        cell.commentText.text = postArray[indexPath.row].comment
        cell.postImageView.sd_setImage(with: URL(string: self.postArray[indexPath.row].image))
        return cell
    }
}

1. 开启TableView自动行高计算 #

在viewDidLoad中添加代码，让TableView根据单元格内的约束自动计算行高：

override func viewDidLoad() {
    super.viewDidLoad()
    tableView.delegate = self
    tableView.dataSource = self
    // 开启自动行高
    tableView.rowHeight = UITableView.automaticDimension
    // 设置预估行高，帮助TableView快速布局
    tableView.estimatedRowHeight = 200
    fetchFirebaseData()
}

2. 给Cell内元素设置完整约束链 #

打开Storyboard，给FeedCell的三个元素设置连续约束，确保从单元格顶部到底部有完整的约束路径：

• emailText：顶部与contentView.top间距8pt，左右与contentView左右各间距8pt，设置numberOfLines = 0（允许换行）
• postImageView：顶部与emailText.bottom间距8pt，左右与contentView左右各间距8pt，设置固定高度（比如150pt）或宽高比（比如1:1），确保图片有明确尺寸约束
• commentText：顶部与postImageView.bottom间距8pt，左右与contentView左右各间距8pt，底部与contentView.bottom间距8pt，设置numberOfLines = 0

3. 配置图片视图内容模式 #

在cellForRowAt中设置图片视图的内容模式，避免图片被拉伸或截断：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! FeedCell
    cell.emailText.text = postArray[indexPath.row].email
    cell.commentText.text = postArray[indexPath.row].comment
    // 设置图片内容模式
    cell.postImageView.contentMode = .scaleAspectFit
    // 如果使用scaleAspectFill，需要开启裁剪
    // cell.postImageView.clipsToBounds = true
    cell.postImageView.sd_setImage(with: URL(string: self.postArray[indexPath.row].image), placeholderImage: UIImage(named: "placeholder"))
    return cell
}

4. 验证数据与模型正确性 #

• 确保POST类的属性名与Firestore中的字段完全匹配
• 检查Firestore返回的imageUrl是有效的可访问链接，添加占位图可快速排查图片加载失败问题

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