在UIKit的UITableView中使用SwiftUI视图作为Cell内容时消除多余边距的方法

嘿，我看了你的问题，你遇到的多余边距问题其实很常见——主要是SwiftUI视图内部的padding和UIKit UITableViewCell的默认布局叠加导致的。下面给你一步步解决的方案：

1. 先干掉SwiftUI视图里的多余内边距 #

看你写的PropertyRow，最后一行加了.padding([.top, .horizontal])，这行就是罪魁祸首之一！它给整个卡片视图额外加了顶部和左右的内边距，叠加到UITableViewCell的布局里，就会出现你看到的莫名空白。

直接把这行删掉，修改后的PropertyRow代码如下：

struct PropertyRow: View {
    let propertyItem: PropertyItem
    
    var body: some View {
        VStack {
            AsyncImage(url: propertyItem.property.imageURL) { image in
                image
                    .resizable()
                    .aspectRatio(contentMode: .fit)
            } placeholder: {
                ProgressView()
            }
            
            HStack {
                VStack(alignment: .leading) {
                    Text(propertyItem.property.address)
                        .fontWeight(.semibold)
                        .font(.footnote)
                    Text(propertyItem.property.phoneNo)
                        .font(.caption)
                        .foregroundStyle(.secondary)
                }
                .layoutPriority(100)
                Spacer()
            }
            .padding([.leading, .trailing])
            .padding([.top, .bottom], 4)
            
            Divider()
                .overlay(.separator)
            
            HStack {
                Button {
                } label: {
                    Label("\(propertyItem.property.calls) Calls", systemImage: "phone")
                        .font(.callout)
                        .labelStyle(CustomLabel(spacing: 8))
                }
                .frame(maxWidth: .infinity)
                
                Divider()
                    .overlay(.separator)
                
                Button {
                } label: {
                    Label("\(propertyItem.property.appointments) Appointments", systemImage: "calendar")
                        .font(.callout)
                        .labelStyle(CustomLabel(spacing: 8))
                }
                .frame(maxWidth: .infinity)
            }
            .frame(height: 44)
            .padding(.bottom, 4)
        }
        .cornerRadius(10)
        .overlay(
            RoundedRectangle(cornerRadius: 10)
                .stroke(Color(.sRGB, red: 150/255, green: 150/255, blue: 150/255, opacity: 0.1), lineWidth: 1)
        )
        // 移除这行多余的padding！
        // .padding([.top, .horizontal])
    }
}

2. 优化UIHostingConfiguration的配置 #

除了设置.margins(.all, 0)，还要补充几个配置，避免cell的默认布局和SwiftUI视图冲突：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let item = propertyItems[indexPath.section]
    let cell = tableView.dequeueReusableCell(withIdentifier: PropertyCell.reuseIdentifier, for: indexPath)
    
    cell.contentConfiguration = UIHostingConfiguration {
        PropertyRow(propertyItem: item)
    }
    .margins(.all, 0) // 强制所有边距为0
    .background(Color.clear) // 让配置的背景透明
    cell.backgroundColor = .clear // 单元格本身也设为透明
    cell.selectionStyle = .none // 如果不需要选中高亮的话可以加上
    
    return cell
}

3. 调整UITableView的全局布局（可选） #

如果你希望卡片在整个列表里有统一的左右/上下间距，不要在cell的视图里加，而是直接在UITableView上设置：

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 给整个列表加统一的内边距，比如左右16，上下8
    tableView.contentInset = UIEdgeInsets(top: 8, left: 16, bottom: 8, right: 16)
    // 去掉UITableView的默认分隔线，因为你的卡片内部已经有自己的分隔线了
    tableView.separatorStyle = .none
}

为什么这样做？ #

• 原来的SwiftUI视图内边距和UITableViewCell的默认布局边距叠加，导致了视觉上的"多余空白"，移除视图内的padding就解决了核心问题。
• 设置背景透明是为了避免UIKit的默认单元格背景和SwiftUI视图的背景出现颜色差，看起来像是有边距。
• 把列表级别的间距放到UITableView的contentInset里，能让布局更统一，也方便后续调整。

如果做完这些还有细微的边距，检查一下你的CustomLabel有没有额外的padding设置，不过大概率上面的步骤已经能解决你的问题了。

内容来源于stack exchange