iOS UICollectionView 點擊 Cell 內按鈕更新該 Cell 標籤計數的實現方案

在 `UICollectionView` 中實現「點擊 Cell 內的 + 按鈕，更新該 Cell 的計數 Label」是常見交互需求。核心難點在於按鈕點擊事件中定位所屬 IndexPath並精準更新對應 Cell。

方案一：Tag + Superview 遍歷 (簡單直接)

// Cell 配置階段
- (UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    MyCell *cell = [cv dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];
    cell.plusButton.tag = indexPath.item;  // 關鍵：存儲 index
    [cell.plusButton addTarget:self action:@selector(plusBtnTapped:) forControlEvents:UIControlEventTouchUpInside];
    return cell;
}

// 按鈕點擊處理
- (void)plusBtnTapped:(UIButton *)sender {
    NSIndexPath *indexPath = [NSIndexPath indexPathForItem:sender.tag inSection:0];
    
    // 方式 A: 直接獲取 Cell 更新 (僅可見 Cell 有效)
    MyCell *cell = (MyCell *)[self.collectionView cellForItemAtIndexPath:indexPath];
    if (cell) {
        cell.updateCountLabel(with: newCount);
    }
    
    // 方式 B: 更新數據源 + reloadItem (通用、安全)
    self.dataArray[indexPath.item] = @(newCount);
    [self.collectionView reloadItemsAtIndexPaths:@[indexPath]];
}

方案二：Block 回調 (解耦、優雅)

// MyCell.h
@property (nonatomic, copy) void(^plusButtonTappedBlock)(NSInteger index);

// MyCell.m
- (IBAction)plusButtonTapped:(UIButton *)sender {
    if (self.plusButtonTappedBlock) {
        self.plusButtonTappedBlock(self.index);  // 需在 cellForItemAtIndexPath 中設置 self.index
    }
}

// Controller
- (UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    MyCell *cell = [cv dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];
    cell.index = indexPath.item;
    cell.plusButtonTappedBlock = ^(NSInteger index) {
        // 更新數據源
        self.dataArray[index] = @(newCount);
        // 精準刷新
        [cv reloadItemsAtIndexPaths:@[[NSIndexPath indexPathForItem:index inSection:0]]];
    };
    return cell;
}

方案三：Target-Action + 閉包捕獲 IndexPath (Swift 推薦)

// Swift 版本
func collectionView(_ cv: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = cv.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! MyCell
    cell.configure(with: data[indexPath.item]) {
        // 閉包捕獲 indexPath
        self.data[indexPath.item].count += 1
        cv.reloadItems(at: [indexPath])
    }
    return cell
}

// MyCell.swift
var onPlusTapped: (() -> Void)?
@IBAction func plusTapped(_ sender: UIButton) {
    onPlusTapped?()
}

關鍵最佳實踐

| 原則 | 說明 | |------|------| | **數據驅動 UI** | 按鈕點擊 → 更新數據源 → `reloadItems(at:)`，而非直接操作 Cell View | | **復用安全** | 直接 `cellForItemAtIndexPath` 獲取 Cell 可能返回 nil (未顯示) 或錯誤 Cell (復用) | | **精準刷新** | 使用 `reloadItems(at: [indexPath])` 而非 `reloadData()`，性能更好、無閃爍 | | **IndexPath 傳遞** | 通過 `tag`、閉包捕獲、Block 參數、關聯對象等方式傳遞 |

進階：批量更新與動畫

// performBatchUpdates 批量動畫更新
collectionView.performBatchUpdates({
    // 多個 indexPath 同時更新
    self.dataArray[index1] = newValue1
    self.dataArray[index2] = newValue2
    self.collectionView.reloadItems(at: [index1, index2])
}, completion: nil)

避坑指南

• ❌ 在按鈕事件中通過 `sender.superview.superview` 遍歷查找 Cell (極其脆弱)
• ❌ 直接修改 Cell 的 Label 文本而不更新數據源 (滑動復用後數據錯亂)
• ❌ 使用 `reloadData()` 導致整個列表閃爍、滾動位置重置
• ✅ 採用 Block 回調 + 數據源更新 + reloadItems(at:) 模式

核心口訣：按鈕傳 IndexPath → 更新 Model → 精準 Reload，符合 MVC/MVVM 數據流向，穩健高效。