使用UIViewRepresentable封装UITableView时单元格位置异常与行高问题

我看了你这段用SwiftUI的UIViewRepresentable封装UITableView的代码，确实踩了几个常见的坑，导致出现单元格位置错乱、重叠，以及行高无法自适应内容的问题。咱们一步步来修复：

问题根源分析 #

1. 行高自适应失效：你把estimatedRowHeight也设置成了UITableView.automaticDimension，这其实不合理——automaticDimension需要一个具体的预估行高作为参考基准，否则TableView无法正确计算实际行高。
2. 单元格复用布局异常：复用HostingCell更新rootView时，UIHostingController的view没有重新计算自身的内在尺寸，也没触发cell的重新布局，导致旧布局尺寸和新内容不匹配，出现重叠或额外内边距。

具体修复步骤 #

1. 修正TableView的行高配置 #

把estimatedRowHeight改成一个具体的数值（比如默认的44），给TableView一个可靠的基准来计算自适应高度：

tableView.rowHeight = UITableView.automaticDimension
tableView.estimatedRowHeight = 44 // 替换原有的automaticDimension

2. 修复复用单元格的布局更新逻辑 #

在更新复用cell的rootView后，强制UIHostingController的view重新计算内在尺寸，触发cell布局更新，同时通知TableView重新计算当前行的高度：
在cellForRowAt的else分支中添加以下代码：

tableViewCell.host?.rootView = AnyView(view)
// 新增布局更新代码
tableViewCell.host?.view.invalidateIntrinsicContentSize()
tableViewCell.contentView.layoutIfNeeded()
tableView.beginUpdates()
tableView.endUpdates()

3. 优化HostingCell初始化后的布局 #

在初始化HostingController并添加约束后，触发一次布局，确保SwiftUI视图能正确填充cell的contentView：
在初始化HostingController的代码块末尾添加：

tableViewCell.contentView.layoutIfNeeded()

完整修正后的代码 #

import SwiftUI
struct ContentView: View {
    @State var rows : [String] = []
    var listData = ListData()
    var body: some View {
        VStack {
            Button(action: {
                self.getDataFromTheServer()
            }) {
                Text("Get 100 entries from the server")
            }
            UIList(rows: $rows)
        }
    }
    func getDataFromTheServer() {
        for _ in 1...100 {
            self.rows.append(self.listData.data)
            self.listData.data.append("a")
        }
    }
}
class ListData {
    var data: String = ""
}
class HostingCell: UITableViewCell {
    var host: UIHostingController<AnyView>?
}
struct UIList: UIViewRepresentable {
    @Binding var rows: [String]
    func makeUIView(context: Context) -> UITableView {
        let tableView = UITableView(frame: .zero, style: .plain)
        tableView.dataSource = context.coordinator
        tableView.delegate = context.coordinator
        tableView.register(HostingCell.self, forCellReuseIdentifier: "Cell")
        tableView.rowHeight = UITableView.automaticDimension
        tableView.estimatedRowHeight = 44 // 修正为具体预估高度
        return tableView
    }
    func updateUIView(_ uiView: UITableView, context: Context) {
        DispatchQueue.main.async {
            uiView.reloadData()
        }
    }
    func makeCoordinator() -> Coordinator {
        Coordinator(rows: $rows)
    }
    class Coordinator: NSObject, UITableViewDataSource, UITableViewDelegate {
        @Binding var rows: [String]
        init(rows: Binding<[String]>) {
            self._rows = rows
        }
        func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            return self.rows.count
        }
        func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            let tableViewCell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! HostingCell
            let view = Text(rows[indexPath.row])
                .background(Color.blue)
                .lineLimit(nil)
            // 首次初始化cell时配置HostingController
            if tableViewCell.host == nil {
                let hostingController = UIHostingController(rootView: AnyView(view))
                tableViewCell.host = hostingController
                let tableCellViewContent = hostingController.view!
                tableCellViewContent.translatesAutoresizingMaskIntoConstraints = false
                tableViewCell.contentView.addSubview(tableCellViewContent)
                NSLayoutConstraint.activate([
                    tableCellViewContent.topAnchor.constraint(equalTo: tableViewCell.contentView.topAnchor),
                    tableCellViewContent.leadingAnchor.constraint(equalTo: tableViewCell.contentView.leadingAnchor),
                    tableCellViewContent.bottomAnchor.constraint(equalTo: tableViewCell.contentView.bottomAnchor),
                    tableCellViewContent.trailingAnchor.constraint(equalTo: tableViewCell.contentView.trailingAnchor)
                ])
                tableViewCell.contentView.layoutIfNeeded() // 初始化后触发布局
            } else {
                // 复用cell时更新rootView
                tableViewCell.host?.rootView = AnyView(view)
                // 触发布局更新，确保内容适配
                tableViewCell.host?.view.invalidateIntrinsicContentSize()
                tableViewCell.contentView.layoutIfNeeded()
                tableView.beginUpdates()
                tableView.endUpdates()
            }
            tableViewCell.setNeedsLayout()
            return tableViewCell
        }
    }
}

额外说明 #

• 使用beginUpdates()和endUpdates()可以让TableView只更新当前行的高度，比全局reload更高效。
• 你原来代码中给Text设置的lineLimit(nil)是正确的，确保文本能自动换行，这是行高自适应的前提。

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