TableView单选按钮跨段异常选中及滚动状态异常问题求助

这个问题我太熟了——本质就是UITableView的HeaderFooterView复用机制在搞鬼！你遇到的section 0、8、16同时选中，滚动时状态乱跳，都是因为这些section的HeaderView被复用了同一个实例，之前的选中状态没有被正确重置或更新。

问题根源拆解 #

UITableView会复用不在屏幕范围内的HeaderFooterView，通常每8个左右的section会循环复用同一个view实例（取决于屏幕高度）。当你选中section 0的radioButton后，这个view被滚出屏幕，再被分配给section 8、16时，它的radioButton状态还是选中的，所以看起来这几个section的按钮都被选中了。滚动时其他section拿到复用的view，自然也会继承之前的状态，导致异常。

分步解决方案 #

1. 单独维护每个section的选中状态

首先要脱离view本身的状态，用数据来记录每个section的选择情况：

• 单选（radioButton）：只需要记录当前选中的section索引，比如用一个可选类型的变量：

  // 记录当前选中radioButton的section索引，nil表示未选中任何一个
  private var selectedRadioSection: Int?
  

• 多选（checkBox）：用一个集合来记录所有选中的section：

  // 记录所有选中checkBox的section索引
  private var checkedSections: Set<Int> = []
  

2. 自定义HeaderView并绑定section索引

创建自定义的HeaderView，给它添加一个sectionIndex属性标识所属section，同时通过闭包将点击事件传递给ViewController：

class CustomHeaderView: UITableViewHeaderFooterView {
    // 你的控件：checkBox、label、radioButton
    let checkBox: UIButton = {
        let btn = UIButton(type: .checkbox)
        // 配置样式（比如设置选中/未选中图标）
        return btn
    }()
    
    let radioButton: UIButton = {
        let btn = UIButton(type: .radio)
        // 配置样式（比如设置选中/未选中图标）
        return btn
    }()
    
    let titleLabel: UILabel = {
        let label = UILabel()
        label.font = UIFont.systemFont(ofSize: 16)
        return label
    }()
    
    // 绑定当前section的索引
    var sectionIndex: Int = 0
    // 闭包：通知外部点击事件
    var onCheckBoxTapped: ((Int) -> Void)?
    var onRadioButtonTapped: ((Int) -> Void)?
    
    override init(reuseIdentifier: String?) {
        super.init(reuseIdentifier: reuseIdentifier)
        setupUI()
        addTapActions()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupUI() {
        // 布局你的checkBox、label、radioButton，这里简化示例布局
        contentView.addSubview(checkBox)
        contentView.addSubview(titleLabel)
        contentView.addSubview(radioButton)
        
        checkBox.frame = CGRect(x: 16, y: 8, width: 24, height: 24)
        titleLabel.frame = CGRect(x: 56, y: 8, width: 200, height: 24)
        radioButton.frame = CGRect(x: UIScreen.main.bounds.width - 40, y: 8, width: 24, height: 24)
    }
    
    private func addTapActions() {
        checkBox.addTarget(self, action: #selector(checkBoxTapped), for: .touchUpInside)
        radioButton.addTarget(self, action: #selector(radioButtonTapped), for: .touchUpInside)
    }
    
    @objc private func checkBoxTapped() {
        onCheckBoxTapped?(sectionIndex)
    }
    
    @objc private func radioButtonTapped() {
        onRadioButtonTapped?(sectionIndex)
    }
    
    // 提供方法，根据外部状态更新控件
    func updateState(isRadioSelected: Bool, isChecked: Bool) {
        radioButton.isSelected = isRadioSelected
        checkBox.isSelected = isChecked
    }
}

3. 在TableView代理中正确复用和更新状态

在ViewController的TableView代理里，注册并复用HeaderView，同时根据维护的状态更新控件：

// 先注册自定义HeaderView
tableView.register(CustomHeaderView.self, forHeaderFooterViewReuseIdentifier: "CustomHeaderView")

// 实现viewForHeaderInSection
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let header = tableView.dequeueReusableHeaderFooterView(withIdentifier: "CustomHeaderView") as! CustomHeaderView
    // 绑定当前section索引
    header.sectionIndex = section
    // 设置标题
    header.titleLabel.text = "Section \(section)"
    
    // 根据维护的状态更新控件
    let isRadioSelected = (selectedRadioSection == section)
    let isChecked = checkedSections.contains(section)
    header.updateState(isRadioSelected: isRadioSelected, isChecked: isChecked)
    
    // 设置checkBox点击回调
    header.onCheckBoxTapped = { [weak self] section in
        guard let self = self else { return }
        if self.checkedSections.contains(section) {
            self.checkedSections.remove(section)
        } else {
            self.checkedSections.insert(section)
        }
        // 仅刷新当前section的HeaderView，避免全局刷新闪烁
        tableView.reloadSections(IndexSet(integer: section), with: .none)
    }
    
    // 设置radioButton点击回调
    header.onRadioButtonTapped = { [weak self] section in
        guard let self = self else { return }
        // 记录之前选中的section
        let previousSelected = self.selectedRadioSection
        // 更新当前选中的section
        self.selectedRadioSection = section
        // 刷新之前选中的和当前选中的section的HeaderView
        var sectionsToReload = IndexSet(integer: section)
        if let prev = previousSelected {
            sectionsToReload.insert(prev)
        }
        tableView.reloadSections(sectionsToReload, with: .none)
    }
    
    return header
}

4. 额外处理：滚动时的状态加固（可选）

如果滚动时还是有偶尔的状态异常，可以在willDisplayHeaderView方法里再强制更新一次状态：

func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
    guard let header = view as? CustomHeaderView else { return }
    let isRadioSelected = (selectedRadioSection == section)
    let isChecked = checkedSections.contains(section)
    header.updateState(isRadioSelected: isRadioSelected, isChecked: isChecked)
}

核心思路总结 #

永远不要依赖复用的View本身来保存状态，用数据驱动UI：所有的选中状态都存在ViewController的变量里，每次复用View时，都根据数据来重置View的状态，这样不管怎么复用，UI都会和数据保持一致。

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