Swift实现点击按钮逐个生成UICollectionView单元格

嘿，我来帮你搞定这个需求！首先先澄清一个小误解：Storyboard并不会硬编码屏幕上显示的单元格总数——这个数量完全由你在UICollectionViewDataSource中的代码控制，Storyboard里的设置只是影响单元格的布局规则（比如尺寸、间距）和预估的可视单元格数量而已。

要实现点击红色按钮逐个显示单元格，核心思路是逐步扩充数据源数组，然后通知CollectionView插入新的单元格，具体步骤如下：

1. 准备数据源 #

首先定义两个数组：一个存储所有要显示的100条数据，另一个作为CollectionView的实时数据源（初始为空，逐步添加元素）：

// 存储全部100条数据的备用数组（可替换成你的实际数据类型）
private let allItems = Array(0..<100)
// CollectionView的实时数据源，初始为空
private var currentDataSource: [Int] = []

2. 实现CollectionView数据源方法 #

确保数据源方法根据currentDataSource的长度返回单元格数量，并配置单元格：

extension YourViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        // 实时数据源的长度就是当前要显示的单元格总数
        return currentDataSource.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "YourCellID", for: indexPath) as! YourCollectionViewCell
        // 用实时数据源配置单元格
        let item = currentDataSource[indexPath.item]
        cell.configure(with: item) // 替换成你的单元格配置逻辑
        return cell
    }
}

3. 给红色按钮添加点击事件 #

在按钮的点击方法中，逐步将备用数组的元素添加到实时数据源，然后通知CollectionView插入单个单元格：

@IBAction func redButtonTapped(_ sender: UIButton) {
    // 检查是否还有未添加的数据
    guard currentDataSource.count < allItems.count else {
        // 所有数据都已显示，禁用按钮防止重复点击
        sender.isEnabled = false
        sender.alpha = 0.6
        return
    }
    
    // 从备用数组中取出下一个元素，添加到实时数据源
    let nextItem = allItems[currentDataSource.count]
    currentDataSource.append(nextItem)
    
    // 计算新单元格的IndexPath
    let newIndexPath = IndexPath(item: currentDataSource.count - 1, section: 0)
    
    // 插入单个单元格（自带过渡动画，比reloadData更流畅）
    collectionView.performBatchUpdates({
        self.collectionView.insertItems(at: [newIndexPath])
    }, completion: { finished in
        // 可选：自动滚动到新添加的单元格底部
        self.collectionView.scrollToItem(at: newIndexPath, at: .bottom, animated: true)
    })
}

4. 额外优化点 #

• 如果希望一开始就显示少量单元格（比如1个），可以在viewDidLoad中先往currentDataSource里添加初始元素，然后调用collectionView.reloadData()
• 若不需要动画效果，也可以直接调用collectionView.reloadData()，但insertItems的过渡体验更自然
• 可以给按钮添加状态提示，比如所有单元格显示后，按钮变灰并提示“已全部加载”

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