如何在UITableView滚动至顶部时更新该表格视图？

我来帮你把这个包含图片、文本和按钮的UITableView实现完整，结合RESTful API数据获取的流程一步步来：

1. 先规范数据结构：定义模型类 #

直接用二维数组管理数据不够灵活，建议先定义对应API返回数据的模型类，方便后续维护：

// 对应API返回的单条挑战数据结构，根据实际API字段调整属性名
struct ChallengeItem: Codable {
    let imageURL: String
    let titleText: String
    let buttonTitle: String
}

然后替换你原来的数组定义，用模型数组存储分区数据：

var section1Items: [ChallengeItem] = []
var section2Items: [ChallengeItem] = []
// 假设你的分区标题，可根据实际需求修改
let sectionTitles = ["Section 1", "Section 2"]

2. 实现RESTful API数据获取 #

写一个方法从API拉取数据并解析，解析完成后刷新表格：

func fetchChallengeData() {
    guard let apiURL = URL(string: "你的API接口地址") else {
        print("无效的API地址")
        return
    }
    
    let task = URLSession.shared.dataTask(with: apiURL) { [weak self] data, _, error in
        guard let self = self, let responseData = data, error == nil else {
            print("获取数据失败：\(error?.localizedDescription ?? "未知错误")")
            return
        }
        
        do {
            // 假设API返回的是包含两个分区的字典结构，比如{"section1": [...], "section2": [...]}
            let apiResponse = try JSONDecoder().decode([String: [ChallengeItem]].self, from: responseData)
            self.section1Items = apiResponse["section1"] ?? []
            self.section2Items = apiResponse["section2"] ?? []
            
            // 回到主线程刷新表格
            DispatchQueue.main.async {
                self.challengeTable.reloadData()
            }
        } catch {
            print("解析数据失败：\(error.localizedDescription)")
        }
    }
    
    task.resume()
}

记得在viewDidLoad里注册自定义Cell并调用数据获取方法：

override func viewDidLoad() {
    super.viewDidLoad()
    // 注册自定义Cell
    challengeTable.register(ChallengeTableViewCell.self, forCellReuseIdentifier: "ChallengeCell")
    // 开始获取数据
    fetchChallengeData()
}

3. 自定义UITableViewCell（包含图片、文本、按钮） #

因为你的Cell有图片、文本和按钮，需要自定义Cell来管理这些组件：

class ChallengeTableViewCell: UITableViewCell {
    // 自定义UI组件
    private let challengeImageView: UIImageView = {
        let iv = UIImageView()
        iv.contentMode = .scaleAspectFit
        iv.clipsToBounds = true
        iv.translatesAutoresizingMaskIntoConstraints = false
        // 可以设置占位图
        iv.image = UIImage(systemName: "photo")
        return iv
    }()
    
    private let titleLabel: UILabel = {
        let label = UILabel()
        label.font = UIFont.systemFont(ofSize: 16, weight: .medium)
        label.numberOfLines = 0
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    private let actionButton: UIButton = {
        let btn = UIButton(type: .system)
        btn.titleLabel?.font = UIFont.systemFont(ofSize: 14, weight: .semibold)
        btn.addTarget(self, action: #selector(actionButtonTapped), for: .touchUpInside)
        btn.translatesAutoresizingMaskIntoConstraints = false
        return btn
    }()
    
    // 存储当前Cell对应的数据，方便按钮点击时使用
    var currentItem: ChallengeItem?
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupCellLayout()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    // 布局UI组件
    private func setupCellLayout() {
        contentView.addSubview(challengeImageView)
        contentView.addSubview(titleLabel)
        contentView.addSubview(actionButton)
        
        NSLayoutConstraint.activate([
            // 图片约束
            challengeImageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
            challengeImageView.centerYAnchor.constraint(equalTo: contentView.centerYAnchor),
            challengeImageView.widthAnchor.constraint(equalToConstant: 60),
            challengeImageView.heightAnchor.constraint(equalToConstant: 60),
            
            // 文本标签约束
            titleLabel.leadingAnchor.constraint(equalTo: challengeImageView.trailingAnchor, constant: 16),
            titleLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 12),
            titleLabel.trailingAnchor.constraint(equalTo: actionButton.leadingAnchor, constant: -12),
            
            // 按钮约束
            actionButton.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
            actionButton.centerYAnchor.constraint(equalTo: contentView.centerYAnchor),
            actionButton.widthAnchor.constraint(equalToConstant: 80),
            actionButton.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -12)
        ])
    }
    
    // 配置Cell内容
    func configure(with item: ChallengeItem) {
        currentItem = item
        titleLabel.text = item.titleText
        actionButton.setTitle(item.buttonTitle, for: .normal)
        
        // 加载图片，推荐用SDWebImage/Kingfisher优化缓存和错误处理
        if let imageURL = URL(string: item.imageURL) {
            URLSession.shared.dataTask(with: imageURL) { [weak self] data, _, error in
                guard let self = self, let imageData = data, error == nil else { return }
                DispatchQueue.main.async {
                    self.challengeImageView.image = UIImage(data: imageData)
                }
            }.resume()
        }
    }
    
    // 按钮点击事件
    @objc private func actionButtonTapped() {
        guard let item = currentItem else { return }
        // 这里处理按钮逻辑，比如跳转、弹窗等
        print("点击了\(item.titleText)对应的按钮")
        // 可以通过代理/闭包把事件传递给ViewController，处理业务逻辑
    }
}

4. 完善UITableView的数据源和代理方法 #

补全你原来的代码，实现Cell的复用和配置：

extension YourViewController: UITableViewDataSource, UITableViewDelegate {
    // 返回分区数量
    func numberOfSections(in tableView: UITableView) -> Int {
        return sectionTitles.count
    }
    
    // 分区标题
    public func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String?{
        return sectionTitles[section]
    }
    
    // 每个分区的行数
    public func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int{
        switch section {
        case 0 : return section1Items.count
        default: return section2Items.count
        }
    }
    
    // 创建并配置Cell
    public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "ChallengeCell", for: indexPath) as? ChallengeTableViewCell else {
            return UITableViewCell()
        }
        
        let targetItem = indexPath.section == 0 ? section1Items[indexPath.row] : section2Items[indexPath.row]
        cell.configure(with: targetItem)
        return cell
    }
    
    // 设置行高（可根据需求调整，或用automaticDimension自适应）
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 80
    }
}

一些优化建议 #

• 图片加载：推荐使用SDWebImage或Kingfisher第三方库，自带缓存、占位图和错误处理，比原生URLSession更高效。
• 事件传递：如果按钮点击需要在ViewController处理业务逻辑，可以给自定义Cell添加代理协议或者闭包，把点击事件传递出去。
• 错误处理：可以在数据获取失败时给用户显示提示（比如弹窗或空状态视图），提升用户体验。

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