如何实现TableView中不同类型Cell按指定次数重复显示

嘿，这个需求其实很好实现！核心思路是先把每种Cell类型对应的重复规则整理好，生成一个按顺序展开的数据源数组，然后让TableView根据这个数组来渲染对应的Cell。下面是完整的实现方案：

1. 定义Cell类型枚举 #

首先用枚举来管理三种Cell类型，这样后续维护起来更清晰：

enum FilterCellType {
    case label
    case textField
    case button
}

2. 配置重复规则并生成展开数据源 #

我们先定义每种Cell的重复次数，然后通过计算属性把它们展开成一个按顺序排列的类型数组，这样TableView的数据源逻辑会非常直观：

// 定义每个Cell类型的重复次数，修改这里就能调整重复数量和顺序
private let cellConfigurations: [(type: FilterCellType, repeatCount: Int)] = [
    (.label, 3),
    (.textField, 2),
    (.button, 2)
]

// 展开成按顺序排列的Cell类型数组，供TableView使用
private var expandedCellTypes: [FilterCellType] {
    var result = [FilterCellType]()
    for config in cellConfigurations {
        result.append(contentsOf: Array(repeating: config.type, count: config.repeatCount))
    }
    return result
}

3. 完整的ViewController实现 #

把上述逻辑整合到你的FilterViewController中，同时包含TableView的配置、Cell注册和数据源实现：

import UIKit

enum FilterCellType {
    case label
    case textField
    case button
}

class FilterViewController: UIViewController {
    
    private let tableView = UITableView()
    // 定义每个Cell类型的重复次数
    private let cellConfigurations: [(type: FilterCellType, repeatCount: Int)] = [
        (.label, 3),
        (.textField, 2),
        (.button, 2)
    ]
    
    // 展开成按顺序排列的Cell类型数组
    private var expandedCellTypes: [FilterCellType] {
        var result = [FilterCellType]()
        for config in cellConfigurations {
            result.append(contentsOf: Array(repeating: config.type, count: config.repeatCount))
        }
        return result
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        setupTableView()
    }
    
    private func setupTableView() {
        view.addSubview(tableView)
        tableView.translatesAutoresizingMaskIntoConstraints = false
        // 约束TableView铺满安全区域
        NSLayoutConstraint.activate([
            tableView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            tableView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
        ])
        
        // 注册三种自定义Cell
        tableView.register(LabelTableViewCell.self, forCellReuseIdentifier: "LabelCell")
        tableView.register(TextFieldTableViewCell.self, forCellReuseIdentifier: "TextFieldCell")
        tableView.register(ButtonTableViewCell.self, forCellReuseIdentifier: "ButtonCell")
        
        tableView.dataSource = self
    }
}

extension FilterViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // 返回展开后的数组长度，就是TableView的总行数
        return expandedCellTypes.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cellType = expandedCellTypes[indexPath.row]
        
        // 根据类型返回对应的Cell并配置
        switch cellType {
        case .label:
            let cell = tableView.dequeueReusableCell(withIdentifier: "LabelCell", for: indexPath) as! LabelTableViewCell
            cell.titleLabel.text = "Label Cell \(indexPath.row + 1)"
            return cell
        case .textField:
            let cell = tableView.dequeueReusableCell(withIdentifier: "TextFieldCell", for: indexPath) as! TextFieldTableViewCell
            cell.inputTextField.placeholder = "TextField Cell \(indexPath.row + 1)"
            return cell
        case .button:
            let cell = tableView.dequeueReusableCell(withIdentifier: "ButtonCell", for: indexPath) as! ButtonTableViewCell
            cell.actionButton.setTitle("Button Cell \(indexPath.row + 1)", for: .normal)
            return cell
        }
    }
}

4. 示例自定义Cell类 #

这里给你提供三种Cell的基础实现，你可以根据自己的UI需求修改样式：

// 带Label的Cell
class LabelTableViewCell: UITableViewCell {
    let titleLabel = UILabel()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupLayout()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupLayout() {
        contentView.addSubview(titleLabel)
        titleLabel.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            titleLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
            titleLabel.centerYAnchor.constraint(equalTo: contentView.centerYAnchor)
        ])
    }
}

// 带TextField的Cell
class TextFieldTableViewCell: UITableViewCell {
    let inputTextField = UITextField()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupLayout()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupLayout() {
        contentView.addSubview(inputTextField)
        inputTextField.translatesAutoresizingMaskIntoConstraints = false
        inputTextField.borderStyle = .roundedRect
        NSLayoutConstraint.activate([
            inputTextField.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
            inputTextField.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
            inputTextField.centerYAnchor.constraint(equalTo: contentView.centerYAnchor),
            inputTextField.heightAnchor.constraint(equalToConstant: 44)
        ])
    }
}

// 带Button的Cell
class ButtonTableViewCell: UITableViewCell {
    let actionButton = UIButton(type: .system)
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupLayout()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupLayout() {
        contentView.addSubview(actionButton)
        actionButton.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            actionButton.centerXAnchor.constraint(equalTo: contentView.centerXAnchor),
            actionButton.centerYAnchor.constraint(equalTo: contentView.centerYAnchor)
        ])
    }
}

思路说明 #

• 通过cellConfigurations可以轻松调整每种Cell的重复次数和显示顺序，不用修改数据源核心逻辑
• expandedCellTypes把规则展开成一维数组，让TableView的数据源方法逻辑变得非常简单，直接根据下标取类型即可
• 所有Cell都采用代码布局，你也可以换成xib/storyboard的方式，只需要修改注册Cell的代码就行

内容的提问来源于stack exchange，提问作者Yazeed AL-Zahrani