Ios 第一个TableView单元格未正确退出队列

我正在开发应用程序，它使用API将标志加载到类中。当使用Alamofire get请求初始化对象时，我正在加载一个标志。 问题是，启动应用程序时出列的前几个TableView单元格在加载时没有标记。

我认为发生这种情况是因为请求处理速度不够快，并且第一个标志在单元出列之前还没有准备好加载。但是我不知道如何在getFlag（）方法中设置一些东西，以帮助我在完成时重新加载TableView数据，或者将排队延迟到加载所有标志时

带有getflag（）方法的国家/地区类

import UIKit
import Alamofire

final class Country {
    let name: String
    let code: String
    var flag: UIImage?
    var info: String?

    init(name: String, code: String, flag: UIImage? = nil, info: String? = nil) {
        self.name = name
        self.code = code
        if flag == nil {
            getFlag()
        } else {
            self.flag = flag
        }
        self.info = info
    }

    func getFlag() {
        let countryFlagsURL = "https://www.countryflags.io/\(code.lowercased())/shiny/64.png"

        Alamofire.request(countryFlagsURL).responseData { response in
            if response.result.isSuccess {
                if let data = response.data {
                    self.flag = UIImage(data: data)
                }
            }
        }
    }
}

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let country = countries[indexPath.row]
        let cell = tableView.dequeueReusableCell(withIdentifier: "Country", for: indexPath)

        cell.textLabel?.text = country.name
        if let flag = country.flag {
            cell.imageView?.image = flag
        } else {
            cell.imageView?.image = .none
        }

        return cell
    }

cellForRowAt方法

import UIKit
import Alamofire

final class Country {
    let name: String
    let code: String
    var flag: UIImage?
    var info: String?

    init(name: String, code: String, flag: UIImage? = nil, info: String? = nil) {
        self.name = name
        self.code = code
        if flag == nil {
            getFlag()
        } else {
            self.flag = flag
        }
        self.info = info
    }

    func getFlag() {
        let countryFlagsURL = "https://www.countryflags.io/\(code.lowercased())/shiny/64.png"

        Alamofire.request(countryFlagsURL).responseData { response in
            if response.result.isSuccess {
                if let data = response.data {
                    self.flag = UIImage(data: data)
                }
            }
        }
    }
}

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let country = countries[indexPath.row]
        let cell = tableView.dequeueReusableCell(withIdentifier: "Country", for: indexPath)

        cell.textLabel?.text = country.name
        if let flag = country.flag {
            cell.imageView?.image = flag
        } else {
            cell.imageView?.image = .none
        }

        return cell
    }

---

Country

的

init

方法不应启动异步图像检索。相反，您应该让

cellForRowAt

启动异步图像检索

但是您也不应该轻松地异步更新

单元格

（因为在Alamofire请求完成时，行可能已经被重用）。而且，更微妙的一点是，如果快速滚动到tableview的末尾，您将希望避免图像请求被积压，因此您希望取消对不再可见的行的挂起请求。有很多方法可以实现这三个目标（异步图像检索在

cellForRowAt

中，在单元格用于另一行后不要更新单元格，如果快速滚动，也不要让它积压）

最简单的方法是使用。然后，处理异步映像请求、取消对重复使用单元的请求等的所有这些复杂性都会降低到如下程度：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: “Country", for: indexPath)
    cell.imageView.af_setImage(withURL: objects[indexPath.row].url, placeholderImage: placeholder)
    return cell
}

let imageSize = CGSize(width: 44, height: 44)

lazy var placeholder: UIImage = UIGraphicsImageRenderer(size: imageSize).image { _ in
    UIColor.blue.setFill()
    UIBezierPath(rect: CGRect(origin: .zero, size: imageSize)).fill()
}

注意，如果要使用默认的表视图单元格，我建议您在此例程中提供一个占位符图像，如上图所示。只需创建一个与您的标志大小相同的空白图像（或任何内容）。这可确保单元正确布置

---

顺便说一下，如果您希望以编程方式生成占位符图像，可以执行以下操作：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: “Country", for: indexPath)
    cell.imageView.af_setImage(withURL: objects[indexPath.row].url, placeholderImage: placeholder)
    return cell
}

let imageSize = CGSize(width: 44, height: 44)

lazy var placeholder: UIImage = UIGraphicsImageRenderer(size: imageSize).image { _ in
    UIColor.blue.setFill()
    UIBezierPath(rect: CGRect(origin: .zero, size: imageSize)).fill()
}

现在，这将创建一个蓝色占位符缩略图，大小为44×44，但您可以根据应用程序调整颜色和大小