如何在UICollectionView无数据时显示占位符布局而非隐藏分区

核心思路是强制保留所有需要的分区，用特殊标记区分空数据状态，而非依赖数据是否存在来动态增减分区。具体实现步骤如下：

1. 固定分区类型，不依赖数据存在性 #

先定义明确的分区枚举，不管后端返回数据是否为空，这三个分区始终存在于Snapshot中：

enum ProfileSection {
    case userInfo
    case children
    case stats
}

2. 给空数据分区添加占位符标记 #

更新Snapshot时，无论Firebase返回的子女/统计数据是否为空，都要将对应的分区添加进去。空数据场景下，给该分区设置特殊的占位符数据（用枚举区分正常数据和占位符）：

// 用枚举统一定义所有可展示的Item类型
enum ProfileItem {
    case userInfo(User)
    case child(Child)
    case stats(Stat)
    case emptyPlaceholder(String) // 占位符，携带提示文本
}

// 更新Snapshot的核心方法
func updateSnapshot(user: User, children: [Child]?, stats: [Stat]?) {
    var snapshot = NSDiffableDataSourceSnapshot<ProfileSection, ProfileItem>()
    
    // 强制添加所有固定分区
    snapshot.appendSections([.userInfo, .children, .stats])
    
    // 用户信息区（必存在数据）
    snapshot.appendItems([.userInfo(user)], toSection: .userInfo)
    
    // 子女信息区：有数据则添加正常Item，无数据则添加占位符
    if let children = children, !children.isEmpty {
        let childItems = children.map { ProfileItem.child($0) }
        snapshot.appendItems(childItems, toSection: .children)
    } else {
        snapshot.appendItems([.emptyPlaceholder("暂无子女信息")], toSection: .children)
    }
    
    // 统计信息区：同理处理空数据场景
    if let stats = stats, !stats.isEmpty {
        let statItems = stats.map { ProfileItem.stats($0) }
        snapshot.appendItems(statItems, toSection: .stats)
    } else {
        snapshot.appendItems([.emptyPlaceholder("暂无统计数据")], toSection: .stats)
    }
    
    dataSource.apply(snapshot, animatingDifferences: true)
}

3. 在Cell配置中区分正常数据和占位符 #

可以注册两种Cell（正常内容Cell + 占位符Cell），也可以用同一个Cell通过状态切换UI。在数据源的cell provider里根据Item类型做判断：

// 初始化DiffableDataSource时的Cell配置逻辑
let dataSource = UICollectionViewDiffableDataSource<ProfileSection, ProfileItem>(collectionView: collectionView) { collectionView, indexPath, item in
    switch item {
    case .userInfo(let user):
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "UserInfoCell", for: indexPath) as! UserInfoCell
        cell.configure(with: user)
        return cell
    case .child(let child):
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ChildCell", for: indexPath) as! ChildCell
        cell.configure(with: child)
        return cell
    case .stats(let stat):
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "StatCell", for: indexPath) as! StatCell
        cell.configure(with: stat)
        return cell
    case .emptyPlaceholder(let text):
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "PlaceholderCell", for: indexPath) as! PlaceholderCell
        cell.configure(with: text) // 配置占位符文本、图标等UI
        return cell
    }
}

4. 布局适配空分区 #

在CompositionalLayout的section provider里，根据分区内的Item类型调整布局尺寸：

func createLayout() -> UICollectionViewCompositionalLayout {
    return UICollectionViewCompositionalLayout { sectionIndex, layoutEnvironment in
        let sectionType = self.dataSource.snapshot().sectionIdentifiers[sectionIndex]
        let itemsInSection = self.dataSource.snapshot().items(inSection: sectionType)
        
        // 判断当前分区是否为占位符分区
        let isPlaceholderSection = itemsInSection.contains {
            guard case .emptyPlaceholder = $0 else { return false }
            return true
        }
        
        if isPlaceholderSection {
            // 占位符分区：固定高度，居中展示
            let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1.0))
            let item = NSCollectionLayoutItem(layoutSize: itemSize)
            
            let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(120))
            let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
            
            let section = NSCollectionLayoutSection(group: group)
            section.contentInsets = NSDirectionalEdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16)
            return section
        } else {
            // 正常数据分区：根据需求返回对应布局
            switch sectionType {
            case .userInfo:
                // 用户信息区布局示例（固定高度）
                let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(100))
                let item = NSCollectionLayoutItem(layoutSize: itemSize)
                let group = NSCollectionLayoutGroup.horizontal(layoutSize: itemSize, subitems: [item])
                let section = NSCollectionLayoutSection(group: group)
                section.contentInsets = NSDirectionalEdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16)
                return section
            case .children:
                // 子女区布局示例（一行两个Cell）
                let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.5), heightDimension: .absolute(80))
                let item = NSCollectionLayoutItem(layoutSize: itemSize)
                item.contentInsets = NSDirectionalEdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8)
                let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(80))
                let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item, item])
                let section = NSCollectionLayoutSection(group: group)
                section.contentInsets = NSDirectionalEdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16)
                return section
            case .stats:
                // 统计区布局示例（横向滚动）
                let itemSize = NSCollectionLayoutSize(widthDimension: .absolute(120), heightDimension: .absolute(80))
                let item = NSCollectionLayoutItem(layoutSize: itemSize)
                item.contentInsets = NSDirectionalEdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8)
                let groupSize = NSCollectionLayoutSize(widthDimension: .absolute(120), heightDimension: .absolute(80))
                let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
                let section = NSCollectionLayoutSection(group: group)
                section.orthogonalScrollingBehavior = .continuous
                section.contentInsets = NSDirectionalEdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16)
                return section
            }
        }
    }
}

关键注意点 #

• 不要根据数据是否为空动态增减分区，始终保留所有需要的分区，通过Item类型区分空状态。
• 占位符Cell的UI要和整体风格统一，比如添加灰色提示图标、浅灰色占位文本。
• 如果复用同一个Cell兼容正常内容和占位符，一定要在配置时重置所有UI状态，避免数据残留。

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