UITableViewCell按钮点击异常：点击单个按钮触发多行边框变红

Hey there! I totally get this frustration—UITableView's cell reuse is a super common gotcha here. Let me break down why this is happening and how to fix it step by step.

Why This Happens #

UITableView doesn’t create a brand-new cell for every row; it reuses cells that scroll off-screen to display new rows. When you tap the first button and change its border to red, that cell gets recycled later for other rows (like Avocat), and since you didn’t reset the button’s style based on actual data, it keeps that red border.

The Solution: Track State with Data #

Instead of directly modifying the button’s appearance when tapped, we need to store which buttons should have the red border in a data structure, then update the cell’s appearance based on that state every time the cell is reused.

Step 1: Add a State Tracker

First, create a way to track which rows have their button selected. A Set<Int> works great here because it lets us add/remove indices easily:

// At the top of your view controller
var selectedButtonIndices: Set<Int> = []

Step 2: Update State on Button Tap

Modify your button’s tap handler to update the state tracker and refresh only the affected row (no need to reload the whole table—it’s way more efficient!):

@objc func buttonTapped(_ sender: UIButton) {
    // Get the cell and its index path
    guard let cell = sender.superview?.superview as? YourCustomTableViewCell,
          let indexPath = tableView.indexPath(for: cell) else {
        return
    }
    
    // Toggle the selection state
    if selectedButtonIndices.contains(indexPath.row) {
        selectedButtonIndices.remove(indexPath.row)
    } else {
        selectedButtonIndices.insert(indexPath.row)
    }
    
    // Refresh only the tapped row to update the button style
    tableView.reloadRows(at: [indexPath], with: .automatic)
}

Step 3: Set Button Style in cellForRowAt

Every time a cell is reused, we need to set the button’s border based on our state tracker. This ensures reused cells don’t carry over old styles:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "YourCellIdentifier", for: indexPath) as! YourCustomTableViewCell
    
    // Set default button style first
    cell.fruitButton.layer.borderWidth = 1.0
    cell.fruitButton.layer.borderColor = UIColor.clear.cgColor // Or your preferred default border color
    
    // Update style if this row's button is selected
    if selectedButtonIndices.contains(indexPath.row) {
        cell.fruitButton.layer.borderColor = UIColor.red.cgColor
    }
    
    // Make sure to set the button's target (if not already set in Interface Builder)
    cell.fruitButton.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)
    
    // Set your cell's label text (e.g., cell.fruitLabel.text = fruits[indexPath.row])
    return cell
}

Quick Notes #

• Don’t forget to set borderWidth—if it’s 0, you won’t see the border color no matter what!
• If you’re using a custom cell class, double-check that your button is properly connected via IBOutlets.
• Using reloadRows instead of reloadData keeps your table scrolling smoothly, especially with large datasets.

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