iOS开发：点击按钮将图片加入收藏列表并在另一视图展示

核心思路 #

放弃存图片索引或Base64的方案，直接保存图片在Asset中的名称——这是最轻便、可靠的方式，因为图片本身已打包在App内，只需通过名称就能直接加载，避免了索引失效、Base64性能损耗的问题。

具体实现步骤 #

1. 收藏状态的存储与读取

用UserDefaults存储收藏的图片名称数组，读写逻辑简单高效：

// 保存/取消收藏
func toggleFavorite(imageName: String) {
    var favoriteNames = UserDefaults.standard.stringArray(forKey: "FavoriteImageNames") ?? []
    if let idx = favoriteNames.firstIndex(of: imageName) {
        favoriteNames.remove(at: idx)
    } else {
        favoriteNames.append(imageName)
    }
    UserDefaults.standard.set(favoriteNames, forKey: "FavoriteImageNames")
}

// 读取已收藏的图片名称
func getFavoriteImageNames() -> [String] {
    return UserDefaults.standard.stringArray(forKey: "FavoriteImageNames") ?? []
}

2. 网格列表的交互与UI更新

假设你用UICollectionView实现网格展示：

• 给每个UICollectionViewCell绑定对应的图片名称，同时传入是否已收藏的状态，用来更新收藏按钮的图标：

// 自定义Cell示例
class ImageGridCell: UICollectionViewCell {
    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var favoriteBtn: UIButton!
    
    var imageName: String = ""
    var onFavoriteToggle: ((String) -> Void)?
    
    func setup(imageName: String, isFavorite: Bool) {
        self.imageName = imageName
        imageView.image = UIImage(named: imageName)
        favoriteBtn.setImage(
            isFavorite ? UIImage(systemName: "heart.fill") : UIImage(systemName: "heart"),
            for: .normal
        )
    }
    
    @IBAction func favoriteBtnTapped(_ sender: UIButton) {
        onFavoriteToggle?(imageName)
    }
}

• 在UICollectionViewDataSource中配置Cell，并处理收藏点击：

// 假设你有所有图片名称的数组
let allImageNames = ["img1", "img2", "img3"] // 替换成你Asset里的图片名
var favoriteNames = getFavoriteImageNames()

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ImageGridCell", for: indexPath) as! ImageGridCell
    let imageName = allImageNames[indexPath.item]
    let isFavorite = favoriteNames.contains(imageName)
    cell.setup(imageName: imageName, isFavorite: isFavorite)
    cell.onFavoriteToggle = { [weak self] name in
        self?.toggleFavorite(imageName: name)
        self?.favoriteNames = self?.getFavoriteImageNames() ?? []
        collectionView.reloadItems(at: [indexPath])
    }
    return cell
}

3. 收藏列表视图的实现

新建独立的ViewController，同样用UICollectionView，数据源直接用读取到的收藏名称数组：

class FavoriteListVC: UIViewController, UICollectionViewDataSource {
    var favoriteImageNames: [String] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        favoriteImageNames = getFavoriteImageNames()
        // 配置CollectionView的布局、注册Cell等
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return favoriteImageNames.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ImageGridCell", for: indexPath) as! ImageGridCell
        let imageName = favoriteImageNames[indexPath.item]
        cell.setup(imageName: imageName, isFavorite: true)
        // 收藏按钮可保留或隐藏，根据需求调整
        return cell
    }
}

注意事项 #

• 确保Asset目录中的图片名称唯一，避免名称重复导致加载错误。
• 如果后续需要支持非Asset目录的图片（比如用户拍摄的照片），再考虑将图片保存到沙盒目录，存储文件路径而非Base64。
• 若需要监听收藏状态变化（比如收藏列表实时更新），可以结合NotificationCenter发送通知，在收藏列表页面接收并刷新数据。

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