ios - 从 Firebase 检索后，图片在 UITableView 中随机移动

Question

正如我的标题所述，在表格 View 中滚动时，我的 tableView 中的图片会四处移动，并且没有显示在正确的帖子上。在我停止滚动后，它们似乎又回到了原位。

我一直在努力理解以下文章:

new Firebase retrieve data and put on the tableview swift

retrieve image from Firebase storage to show on tableview swift

swift Firebase sort posts in tableview by date

但我不知道如何让图片显示得更好。这是我拥有的:

    import UIKit
    import FirebaseAuth
    import FirebaseDatabase
    import FirebaseStorage

    class MainFeedTableViewController: UITableViewController {

        var posts = [Post]()

        let alert = AlertsViewController()

        var databaseRef: FIRDatabaseReference! {
            return FIRDatabase.database().reference()
        }

        var storageRef: FIRStorage! {
            return FIRStorage.storage()
        }

    override func viewDidLoad() {
        super.viewDidLoad()

        fetchPosts()

    }

    // populates the tableView with posts content in real time
    private func fetchPosts(){

        let postRefs = databaseRef.child("posts")

        postRefs.observe(.value) { (snapshot: FIRDataSnapshot) in
            var newPost = [Post]()

            for post in snapshot.children{
                let postObject = Post(snapshot: post as! FIRDataSnapshot)
                newPost.insert(postObject, at: 0)
            }

            self.posts = newPost
            self.tableView.reloadData()
        }

    }

    // MARK: - Table view data source

    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return posts.count
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let postsAtIndexPath = posts[indexPath.row]

        if postsAtIndexPath.postWithImage == true {

            let cell = tableView.dequeueReusableCell(withIdentifier: "postWithImage", for: indexPath) as! PostWithImageTableViewCell

            let postUser = postsAtIndexPath.uid

            let userRef = databaseRef.child("users/\(postUser!)")

            userRef.observe(.value, with: { (snapshot) in

                let user = User(snapshot: snapshot)

                DispatchQueue.main.async(execute: {
                    cell.userRealNameLabel.text = user.name
                    cell.usernameLabel.text = "@" + user.username
                    cell.postTextView.text = postsAtIndexPath.postText
                    cell.timeStampLabel.text = postsAtIndexPath.date
                })

                self.storageRef.reference(forURL: user.photoURL).data(withMaxSize: 1 * 1024 * 1024, completion: { (data, error) in

                    if error == nil{

                        DispatchQueue.main.async(execute: {
                            if let data = data{
                                cell.userProfilePicture.image = UIImage(data: data)
                            }
                        })

                    }
                    else{

                        print(error!.localizedDescription)
                    }
                })

                self.storageRef.reference(forURL: postsAtIndexPath.postPictureURL).data(withMaxSize: 1 * 1024 * 1024, completion: { (data, error) in

                    if error == nil{

                        DispatchQueue.main.async(execute: {
                            if let data = data{
                                cell.postImage.image = UIImage(data: data)

                            }
                        })

                    }
                    else{
                        self.alert.displayAlert(alertTitle: "Error", alertMessage: error!.localizedDescription, fromController: self)
                    }
                })

            }) { (error) in
                self.alert.displayAlert(alertTitle: "Error", alertMessage: error.localizedDescription, fromController: self)
            }

            return cell
        }
        else{

            let cell = tableView.dequeueReusableCell(withIdentifier: "postWithText", for: indexPath) as! PostTableViewCell

            let postUser = postsAtIndexPath.uid

            let userRef = databaseRef.child("users/\(postUser!)")

            userRef.observe(.value, with: { (snapshot) in

                let user = User(snapshot: snapshot)

                DispatchQueue.main.async(execute: {
                    cell.userRealNameLabel.text = user.name
                    cell.usernameLabel.text = "@" + user.username
                    cell.postTextView.text = postsAtIndexPath.postText
                    cell.timestampLabel.text = postsAtIndexPath.date

                })

                self.storageRef.reference(forURL: user.photoURL).data(withMaxSize: 1 * 1024 * 1024, completion: { (data, error) in

                    if error == nil{

                        DispatchQueue.main.async(execute: {
                            if let data = data{
                                cell.userProfilePicture.image = UIImage(data: data)
                            }
                        })

                    }
                    else{

                        print(error!.localizedDescription)
                    }
                })

            }) { (error) in
                self.alert.displayAlert(alertTitle: "Error", alertMessage: error.localizedDescription, fromController: self)
            }

            return cell
        }

    }

}

我遇到困难的原因是因为我希望用户的用户名、姓名和个人资料图片在他们编辑信息时随处实时更改。这就是为什么我要根据帖子的用户 uid 检索用户信息。

什么是更好的实现方式？

Answer 1

您必须覆盖 PostWithImageTableViewCell 中的 prepareForReuse 函数。

示例

 override func prepareForReuse() {
        super.prepareForReuse()
        self.userProfilePicture.image = nil
        //reset the rest of the values on your `UITableViewCell` subclass
 }

编辑

既然复用问题已经解决，我想推荐下面的缓存框架，Kingfisher , 更便捷的图片展示体验。

Kingfisher 在 UIImageView 上有一个很棒的扩展，它将为您处理缓存。

在这里你会如何使用它:

let url = URL(string: "https://domain.com/image.jpg")!
imageView.kf.setImage(with: url)

你只要设置成URL，what就可以唯一标识图片资源，并且只下载一次。这是一个cheat sheet , 如何使用它。