如何实现UICollectionView同数据不同布局的Section切换

核心问题根源 #

DiffableDataSource 默认仅根据 Item的哈希值变化 更新内容，而Section的布局由布局Provider中Section标识符的逻辑决定。如果Section1和Section4使用了相同的标识符（或布局Provider未区分两者），即使替换数据，布局也不会触发更新。

可行解决方案 #

1. 为不同布局的Section分配唯一标识符

定义明确区分布局的Section枚举，确保Section1和Section4是不同的枚举值，且都遵循Hashable：

enum CollectionSection: Hashable {
    case gridSection // 原Section1的网格布局
    case normalSection2
    case normalSection3
    case listSection // Section4的列表布局
}

2. 布局Provider根据Section标识符返回对应布局

在创建UICollectionViewCompositionalLayout时，通过Section标识符分支返回不同布局：

func makeCollectionLayout() -> UICollectionViewCompositionalLayout {
    return UICollectionViewCompositionalLayout { [weak self] sectionIndex, _ in
        guard let section = self?.dataSource?.snapshot().sectionIdentifiers[sectionIndex] else {
            return nil
        }
        
        switch section {
        case .gridSection:
            // 网格布局配置
            let item = NSCollectionLayoutItem(layoutSize: .init(widthDimension: .fractionalWidth(1/3), heightDimension: .fractionalHeight(1)))
            let group = NSCollectionLayoutGroup.horizontal(layoutSize: .init(widthDimension: .fractionalWidth(1), heightDimension: .absolute(120)), subitems: [item])
            return NSCollectionLayoutSection(group: group)
            
        case .listSection:
            // 列表布局配置
            let item = NSCollectionLayoutItem(layoutSize: .init(widthDimension: .fractionalWidth(1), heightDimension: .absolute(60)))
            let group = NSCollectionLayoutGroup.horizontal(layoutSize: .init(widthDimension: .fractionalWidth(1), heightDimension: .absolute(60)), subitems: [item])
            let section = NSCollectionLayoutSection(group: group)
            section.contentInsets = .init(top: 8, leading: 16, bottom: 8, trailing: 16)
            return section
            
        case .normalSection2, .normalSection3:
            // 其他Section的布局
            let item = NSCollectionLayoutItem(layoutSize: .init(widthDimension: .fractionalWidth(1), heightDimension: .fractionalHeight(1)))
            let group = NSCollectionLayoutGroup.horizontal(layoutSize: .init(widthDimension: .fractionalWidth(1), heightDimension: .absolute(80)), subitems: [item])
            return NSCollectionLayoutSection(group: group)
        }
    }
}

3. 更新Snapshot时完全替换Section集合

点击Section1的Item后，创建全新的Snapshot，移除旧Section并添加目标Section4，确保DiffableDataSource识别到Section的变更：

func handleGridItemTap() {
    guard let data = self.currentDataArray else { return }
    
    var newSnapshot = NSDiffableDataSourceSnapshot<CollectionSection, YourItemModel>()
    // 清空所有旧Section
    newSnapshot.deleteAllSections()
    // 添加列表Section并填充数据
    newSnapshot.appendSections([.listSection])
    newSnapshot.appendItems(data, toSection: .listSection)
    
    // 应用快照，触发更新
    dataSource.apply(newSnapshot, animatingDifferences: true)
}

4. 确保Cell配置与Section绑定

在DiffableDataSource的cellProvider中，根据当前Section返回对应类型的Cell，避免布局与Cell不匹配：

let dataSource = UICollectionViewDiffableDataSource<CollectionSection, YourItemModel>(collectionView: collectionView) { [weak self] collectionView, indexPath, item in
    guard let section = self?.dataSource?.snapshot().sectionIdentifiers[indexPath.section] else {
        return nil
    }
    
    switch section {
    case .gridSection:
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "GridCell", for: indexPath) as! GridCell
        cell.configure(with: item)
        return cell
        
    case .listSection:
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ListCell", for: indexPath) as! ListCell
        cell.configure(with: item)
        return cell
        
    default:
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "NormalCell", for: indexPath) as! NormalCell
        cell.configure(with: item)
        return cell
    }
}

5. 极端情况：强制刷新布局（可选）

如果上述步骤仍未生效，可在应用快照后强制刷新布局（仅作为兜底方案，优先用前4步）：

dataSource.apply(newSnapshot, animatingDifferences: true) { [weak self] in
    self?.collectionView.collectionViewLayout.invalidateLayout()
}

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