如何在Table View Cell中创建可变尺寸Collection View并修复加载异常

先一步步拆解你的需求，同时修复你遇到的两个具体bug：

一、基础实现：在Table View Cell中创建Collection View #

这是内嵌Collection View的标准落地流程：

• 自定义一个UITableViewCell子类（比如叫EmbeddedCollectionCell），在XIB或纯代码里给Cell的contentView添加UICollectionView，并设置铺满整个contentView的约束。
• 给这个Collection View指定dataSource和delegate：可以让自定义Cell自身实现这两个协议，也可以把代理传递给外部ViewController，根据你的业务复杂度选择。
• 在ViewController的tableView(_:cellForRowAt:)方法中，拿到自定义Cell后，给Collection View的数据源赋值，再调用collectionView.reloadData()触发渲染。

二、进阶实现：不同尺寸Collection View Cell + 网络图片加载 #

针对你遇到的两个问题，逐个修复：

问题1：最后两个小单元格上移 #

你的sizeForItemAt尺寸计算和FlowLayout的间距设置不匹配，导致布局偏移。可以这样调整：

1. 先统一配置FlowLayout的间距参数：

// 在初始化Collection View时设置布局
let layout = UICollectionViewFlowLayout()
layout.minimumLineSpacing = 5
layout.minimumInteritemSpacing = 5
layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)

2. 修改尺寸计算逻辑，确保大小和间距适配：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let cvWidth = collectionView.bounds.width // 用bounds替代frame，避免布局变动时出错
    let biggerCellWidth = (cvWidth - 5) / 2.5 // 先减去间距再计算宽度，保证布局紧凑
    if indexPath.row == 2 || indexPath.row == 3 {
        // 小单元格：总宽度减去3个间距（左右+中间），均分2列
        let smallCellWidth = (cvWidth - 3*5)/2
        return CGSize(width: smallCellWidth, height: smallCellWidth)
    }
    return CGSize(width: biggerCellWidth, height: biggerCellWidth)
}

调整后小单元格会均匀排列在一行，不会出现上移错位的情况。

问题2：图片下载后需手动触摸才加载 #

这是因为图片异步下载完成后，你没有通知Collection View刷新对应Cell。解决方法很简单：

• 在图片下载完成的回调里，切换到主线程刷新指定Cell：

// 示例：用URLSession下载图片的逻辑
func loadImage(for indexPath: IndexPath, url: URL) {
    URLSession.shared.dataTask(with: url) { [weak self] data, _, error in
        guard let data = data, let image = UIImage(data: data), let self = self else { return }
        DispatchQueue.main.async {
            // 更新数据源里的图片
            self.imageList[indexPath.row] = image
            // 只刷新当前下载完成的Cell，性能更优
            self.collectionView.reloadItems(at: [indexPath])
        }
    }.resume()
}

注意必须在主线程更新UI，这样图片下载完成后，对应Cell会自动刷新显示，不需要手动触摸触发。

额外优化提示 #

• 为了避免Table View滚动时Collection View重复刷新，可以在自定义TableViewCell中添加数据源的监听属性：

class EmbeddedCollectionCell: UITableViewCell, UICollectionViewDataSource {
    var imageDataList: [UIImage?] = [] {
        didSet {
            collectionView.reloadData()
        }
    }
    // ...其他代码
}

• 可以用成熟的图片加载库（比如Kingfisher）简化下载逻辑，这类库会自动处理图片缓存和加载完成后的UI刷新，减少手动代码量。

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