UICompositionalLayout懒加载Sections时Loading Cell重绘异常求助

我正在用UICollectionView实现电视指南的Sections懒加载功能，采用UICompositionalLayout和UIDiffableDataSource来利用新API并降低性能开销。目前功能基本可用，但遇到一个视觉bug：当Sections即将重载时，"Loading..."单元格会被强制调整为第一个Event单元格的尺寸，而不是随事件加载完成后无缝消失。

可能的原因 #

• 复用标识符冲突：Loading单元格与Event单元格共用复用ID，导致复用池中的单元格残留布局参数，引发尺寸突变
• 快照更新过渡逻辑缺失：DiffableDataSource更新快照时，未指定合适的过渡动画，布局引擎直接替换单元格导致尺寸异常
• 布局尺寸规则冲突：Compositional Layout未给Loading单元格所在组单独设置尺寸规则，布局系统错误复用了Event单元格的尺寸计算逻辑
• Hashable实现不严谨：Section或Item的Hashable协议实现有误，导致DiffableDataSource的差异计算出现偏差

解决方案 #

1. 给Loading单元格单独分配复用ID #

确保两类单元格完全隔离，避免复用干扰：

// 注册阶段区分复用ID
collectionView.register(LoadingCell.self, forCellWithReuseIdentifier: "LoadingCell")
collectionView.register(EventCell.self, forCellWithReuseIdentifier: "EventCell")

// DataSource的cellProvider中返回对应单元格
dataSource = UICollectionViewDiffableDataSource<Section, Item>(collectionView: collectionView) { cv, indexPath, item in
    switch item {
    case .loading:
        let cell = cv.dequeueReusableCell(withReuseIdentifier: "LoadingCell", for: indexPath) as! LoadingCell
        // 强制重置尺寸约束，避免复用残留
        cell.contentView.constraints.forEach { $0.isActive = false }
        NSLayoutConstraint.activate([
            cell.contentView.heightAnchor.constraint(equalToConstant: 60),
            cell.contentView.widthAnchor.constraint(equalTo: cv.widthAnchor)
        ])
        return cell
    case .event(let event):
        let cell = cv.dequeueReusableCell(withReuseIdentifier: "EventCell", for: indexPath) as! EventCell
        cell.configure(with: event)
        return cell
    }
}

2. 优化快照更新的过渡动画 #

明确指定过渡类型，避免布局突变：

var snapshot = dataSource.snapshot()
// 先移除Loading项，再添加新Event项
snapshot.deleteItems([.loading])
snapshot.appendItems(events.map { Item.event($0) }, toSection: currentSection)
// 使用淡入淡出过渡，配合布局刷新确保尺寸正确
dataSource.apply(snapshot, animatingDifferences: true) { [weak self] in
    self?.collectionView.collectionViewLayout.invalidateLayout()
}

3. 为Loading组单独设置布局规则 #

在Compositional Layout中区分Loading状态的Section布局：

func createLayout() -> UICollectionViewLayout {
    return UICollectionViewCompositionalLayout { sectionIndex, env in
        let section = self.sections[sectionIndex]
        if section.isLoading {
            // Loading组固定尺寸：满宽+固定高度
            let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(60))
            let item = NSCollectionLayoutItem(layoutSize: itemSize)
            let group = NSCollectionLayoutGroup.horizontal(layoutSize: itemSize, subitems: [item])
            let sectionLayout = NSCollectionLayoutSection(group: group)
            return sectionLayout
        } else {
            // Event组的常规布局
            let itemSize = NSCollectionLayoutSize(widthDimension: .absolute(self.eventWidth), heightDimension: .absolute(60))
            let item = NSCollectionLayoutItem(layoutSize: itemSize)
            let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(60))
            let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
            let sectionLayout = NSCollectionLayoutSection(group: group)
            sectionLayout.orthogonalScrollingBehavior = .continuous
            return sectionLayout
        }
    }
}

4. 修正LoadingCell的尺寸约束 #

确保LoadingCell的尺寸不受自动布局动态调整影响：

class LoadingCell: UICollectionViewCell {
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupUI()
        lockSize()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupUI()
        lockSize()
    }
    
    private func setupUI() {
        let label = UILabel()
        label.text = "Loading..."
        label.textAlignment = .center
        contentView.addSubview(label)
        label.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: contentView.centerXAnchor),
            label.centerYAnchor.constraint(equalTo: contentView.centerYAnchor)
        ])
    }
    
    private func lockSize() {
        contentView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            contentView.heightAnchor.constraint(equalToConstant: 60),
            contentView.widthAnchor.constraint(equalTo: widthAnchor)
        ])
    }
}

额外排查点 #

• 检查collectionView(_:willDisplay:forItemAt:)或collectionView(_:didEndDisplaying:forItemAt:)中是否有修改单元格尺寸的代码
• 确认Section和Item的Hashable实现完全符合业务逻辑，避免DiffableDataSource错误识别单元格差异

内容的提问来源于stack exchange，提问作者K. Janjuha