如何用UITableView实现学生-科目嵌套列表？解决滚动重复加载问题

这个问题太常见了——都是UITableView的cell复用机制搞的鬼！当cell滚出屏幕后会被放进复用池，下次再被调用时，之前你添加到stackView里的UILabel并没有被移除，所以再次执行for循环时，新的Label就会和旧的叠加在一起，导致内容重复。下面给你几个靠谱的解决方案，按推荐程度排序：

方案1：配置Cell前清空StackView的子视图（最简单直接） #

在每次给cell设置数据前，先把stackView里所有已添加的子视图移除干净，再重新添加新的科目Label。代码示例：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "StudentCell", for: indexPath) as! StudentCell
    let student = students[indexPath.row]
    
    // 关键：先清空stackView里的所有子视图
    cell.subjectStackView.arrangedSubviews.forEach { subview in
        subview.removeFromSuperview()
    }
    
    // 再循环添加科目Label
    for subject in student.subjects {
        let label = UILabel()
        label.text = subject
        label.font = UIFont.systemFont(ofSize: 14)
        label.textColor = .darkGray
        cell.subjectStackView.addArrangedSubview(label)
    }
    
    cell.nameLabel.text = student.name
    return cell
}

这个方法优点是修改成本极低，适合快速解决问题；缺点是每次都要销毁和创建视图，频繁滚动时可能有轻微的性能损耗。

方案2：复用已创建的Label（性能最优） #

在自定义Cell内部维护一个Label缓存池，每次配置数据时，优先复用已有的Label，不够的话再创建新的，避免重复的视图销毁和创建操作。代码示例：

自定义Cell代码 #

class StudentCell: UITableViewCell {
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var subjectStackView: UIStackView!
    
    // 缓存已创建的科目Label，避免重复创建
    private var cachedSubjectLabels: [UILabel] = []
    
    func configure(with student: Student) {
        nameLabel.text = student.name
        
        // 先把所有缓存的Label从stackView移除并隐藏
        cachedSubjectLabels.forEach {
            $0.removeFromSuperview()
            $0.isHidden = true
        }
        
        // 复用已有Label，不足则新建
        for (index, subject) in student.subjects.enumerated() {
            let label: UILabel
            if index < cachedSubjectLabels.count {
                label = cachedSubjectLabels[index]
                label.isHidden = false
            } else {
                label = UILabel()
                label.font = UIFont.systemFont(ofSize: 14)
                label.textColor = .darkGray
                cachedSubjectLabels.append(label)
            }
            label.text = subject
            subjectStackView.addArrangedSubview(label)
        }
    }
}

TableView代理方法 #

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "StudentCell", for: indexPath) as! StudentCell
    let student = students[indexPath.row]
    
    // 直接调用配置方法即可
    cell.configure(with: student)
    return cell
}

这个方法既解决了内容重复的问题，又最大化利用了已有的视图，滚动性能更好，适合数据量较大的场景。

方案3：用单个文本视图展示所有科目（样式简化场景） #

如果对科目的展示样式要求不高，也可以用一个UITextView（或UILabel，开启自动换行）来替代StackView，把所有科目用换行符拼接后直接赋值，这样完全避免了多视图管理的问题：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "StudentCell", for: indexPath) as! StudentCell
    let student = students[indexPath.row]
    
    cell.nameLabel.text = student.name
    // 把科目用换行符拼接成字符串
    let subjectText = student.subjects.joined(separator: "\n")
    cell.subjectTextView.text = subjectText
    
    // 配置TextView为不可编辑、禁止滚动
    cell.subjectTextView.isEditable = false
    cell.subjectTextView.isScrollEnabled = false
    cell.subjectTextView.textContainerInset = UIEdgeInsets.zero
    cell.subjectTextView.textContainer.lineFragmentPadding = 0
    
    return cell
}

这个方法最简洁，但样式上不如多个Label灵活，适合快速实现基础展示需求。

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