DownloadingImages 下载缓存图片,显示图片文字列表
1. 用到的技术点:
1) Codable : 可编/解码 JSON 数据
2) background threads : 后台线程
3) weak self : 弱引用
4) Combine : 取消器/组合操作
5) Publishers and Subscribers : 发布者与订阅者
6) FileManager : 文件管理器
7) NSCache : 缓存
2. 网址:
2.1 测试接口网址:
jsonplaceholder
https://jsonplaceholder.typicode.com/
2.2 JSON 转 Model 网址:
quicktype
https://app.quicktype.io/
3. 项目结构图

4. Model 层
4.1 创建 PhotoModel.swift 文件
import Foundationstruct PhotoModel: Identifiable, Codable{let albumId: Intlet id: Intlet title: Stringlet url: Stringlet thumbnailUrl: String
}/*{"albumId": 1,"id": 1,"title": "accusamus beatae ad facilis cum similique qui sunt","url": "https://via.placeholder.com/600/92c952","thumbnailUrl": "https://via.placeholder.com/150/92c952"}*/
5. 工具类
5.1 创建请求数据服务类,PhotoModelDataService.swift
import Foundation
import Combine/// 请求数据服务
class PhotoModelDataService{// 单例模式 Singletonstatic let instance = PhotoModelDataService()// 返回 JSON 数据,解码成模型@Published var photoModel:[PhotoModel] = []// 随时取消请求var cancellables = Set<AnyCancellable>()// 只能内部实例化,保证一个 App 只有一次实例化private init() {downloadData()}// 测试接口网址: https://jsonplaceholder.typicode.com/// 下载数据func downloadData(){// 获取 URLguard let url = URL(string: "https://jsonplaceholder.typicode.com/photos") else { return }// 进行请求URLSession.shared.dataTaskPublisher(for: url).subscribe(on: DispatchQueue.global(qos: .background)).receive(on: DispatchQueue.main).tryMap(handleOutput).decode(type: [PhotoModel].self, decoder: JSONDecoder()).sink { completion inswitch(completion){case .finished:breakcase .failure(let error):print("Error downloading data. \(error)")break}} receiveValue: { [weak self] returnedPhotoModel inguard let self = self else { return }self.photoModel = returnedPhotoModel}// 随时取消.store(in: &cancellables)}// 输出数据private func handleOutput(output: URLSession.DataTaskPublisher.Output) throws -> Data{guardlet response = output.response as? HTTPURLResponse,response.statusCode >= 200 && response.statusCode < 300 else {throw URLError(.badServerResponse)}return output.data}
}
5.2 创建图片缓存管理器类,PhotoModelCacheManager.swift
import Foundation
import SwiftUI/// 图片缓存管理器
class PhotoModelCacheManager{// 单例模式static let instance = PhotoModelCacheManager()// 只能内部实例化,保证一个 App 只有一次实例化private init() {}// 图片数量缓存,计算型属性var photoCache: NSCache<NSString, UIImage> = {let cache = NSCache<NSString, UIImage>()cache.countLimit = 200cache.totalCostLimit = 1024 * 1024 * 200 // 200mbreturn cache}()// 添加func add(key: String, value: UIImage){photoCache.setObject(value, forKey: key as NSString)}// 获取func get(key: String) -> UIImage? {return photoCache.object(forKey: key as NSString)}
}
5.3 创建储存图片文件管理类,PhotoModelFileManager.swift
import Foundation
import SwiftUI// 存储图片文件管理器
class PhotoModelFileManager{// 单例模式static let instance = PhotoModelFileManager()let folderName = "downloaded_photos"private init(){createFolderIfNeeded()}// 创建存放图片的目录private func createFolderIfNeeded(){guard let url = getFolderPath() else { return }if !FileManager.default.fileExists(atPath: url.path){do {try FileManager.default.createDirectory(at: url, withIntermediateDirectories: true)print("Created folder success.")} catch let error {print("Error creating folder. \(error)")}}}// 创建文件夹路径private func getFolderPath()-> URL?{return FileManager.default.urls(for: .cachesDirectory, in: .userDomainMask).first?.appendingPathComponent(folderName)}// .../downloaded_photos// .../downloaded_photos/image_name.png/// 获取图片路径/// - Parameter key: 名字/// - Returns: 图片路径private func getImagePath(key: String) -> URL?{guard let folder = getFolderPath() else { return nil}return folder.appendingPathComponent(key + ".png")}// 添加图片func add(key: String, value: UIImage){// 获取数据和路径guard let data = value.pngData(),let url = getImagePath(key: key) else { return }// 文件写人数据do {try data.write(to: url)print("Saving to file success.")} catch let error {print("Error saving to file manager. \(error)")}}// 获取图片func get(key: String) -> UIImage?{guardlet path = getImagePath(key: key)?.path,FileManager.default.fileExists(atPath: path) else {//print("Error getting path.")return nil}return UIImage(contentsOfFile: path)}
}
6. ViewModel 层
6.1 创建下载图片 ViewModel 类,DownloadingImageViewModel.swift
import Foundation
import Combineclass DownloadingImageViewModel: ObservableObject{// 数组模型@Published var dataArray:[PhotoModel] = []// 请求数据服务let dataService = PhotoModelDataService.instance// 取消操作var cancellables = Set<AnyCancellable>()init() {addSubscribers()}// 订阅数据func addSubscribers(){dataService.$photoModel.sink {[weak self] returnedPhotoModel inguard let self = self else { return }self.dataArray = returnedPhotoModel}.store(in: &cancellables)}
}
6.2 创建图片加载 ViewModel 类,ImageLoadingViewModel.swift
import Foundation
import SwiftUI
import Combineclass ImageLoadingViewModel: ObservableObject{@Published var image: UIImage?@Published var isLoading: Bool = false// 取消var cancellables = Set<AnyCancellable>()// 缓存管理器let manager = PhotoModelFileManager.instancelet urlString: Stringlet imageKey: Stringinit(url: String, key: String) {urlString = urlimageKey = keygetImage()}// 获取图片func getImage() {if let saveImage = manager.get(key: imageKey){image = saveImageprint("Getting saved image.")}else{downLoadImage()print("Downloading image now!")}}// 下载图片func downLoadImage(){isLoading = trueguard let url = URL(string: urlString) else {isLoading = falsereturn}// 请求URLSession.shared.dataTaskPublisher(for: url).map { UIImage(data: $0.data) }.receive(on: DispatchQueue.main).sink { [weak self] _ inself?.isLoading = false} receiveValue: { [weak self] returnedImage inguardlet self = self,let image = returnedImage else { return }self.image = image// 下载的图像保存在缓存中self.manager.add(key: imageKey, value: image)}.store(in: &cancellables)}
}
7. 创建 View 层
7.1 创建下载,缓存,显示图片视图,DownloadingImageView.swift
import SwiftUI/// 下载,缓存,显示图片
struct DownloadingImageView: View {@StateObject var loaderViewModel: ImageLoadingViewModelinit(url: String, key: String) {// _ : 加载器 wrappedValue: 包装器_loaderViewModel = StateObject(wrappedValue: ImageLoadingViewModel(url: url, key: key))}var body: some View {ZStack {if loaderViewModel.isLoading{ProgressView()}else if let image = loaderViewModel.image{Image(uiImage: image).resizable().clipShape(Circle())}}}
}struct DownloadingImageView_Previews: PreviewProvider {static var previews: some View {DownloadingImageView(url: "https://via.placeholder.com/600/92c952", key: "1").frame(width: 75, height: 75).previewLayout(.sizeThatFits)}
}
7.2 创建下载显示图片文字行视图,DownloadingImagesRow.swift
import SwiftUIstruct DownloadingImagesRow: View {let model : PhotoModelvar body: some View {HStack {DownloadingImageView(url: model.url, key: "\(model.id)").frame(width: 75, height: 75)VStack (alignment: .leading){Text(model.title).font(.headline)Text(model.url).foregroundColor(.gray).italic()}.frame( maxWidth: .infinity, alignment: .leading)}}
}struct DownloadingImagesRow_Previews: PreviewProvider {static var previews: some View {DownloadingImagesRow(model: PhotoModel(albumId: 1, id: 1, title: "title", url: "https://via.placeholder.com/600/92c952", thumbnailUrl: "thumbnaolUrl here")).padding().previewLayout(.sizeThatFits)}
}
7.3 创建下载显示图片文字列表视图,DownloadingImagesBootcamp.swift
import SwiftUI// Codable : 可编/解码 JSON 数据
// background threads : 后台线程
// weak self : 弱引用
// Combine : 取消器/组合操作
// Publishers and Subscribers : 发布者与订阅者
// FileManager : 文件管理器
// NSCache : 缓存struct DownloadingImagesBootcamp: View {@StateObject var viewModel = DownloadingImageViewModel()var body: some View {NavigationView {List {ForEach(viewModel.dataArray) { model inDownloadingImagesRow(model: model)}}.navigationTitle("Downloading Images")}}
}struct DownloadingImagesBootcamp_Previews: PreviewProvider {static var previews: some View {DownloadingImagesBootcamp()}
}
8. 效果图:

相关文章:
DownloadingImages 下载缓存图片,显示图片文字列表
1. 用到的技术点: 1) Codable : 可编/解码 JSON 数据 2) background threads : 后台线程 3) weak self : 弱引用 4) Combine : 取消器/组合操作 5) Publishers and Subscribers : 发布者与订阅者 6) FileManager : 文件管理器 7) NSCache : 缓存 2. 网址: 2.1 测试接口网址: …...
【应用层协议】HTTPS的加密流程
目录 一、认识HTTPS 二、密文 1、对称加密 2、非对称加密 三、HTTPS加密流程 1、建立连接 2、证书验证 3、密钥协商 4、数据传输 5、关闭连接 总结 在数字化时代,互联网已经成为我们生活和工作中不可或缺的一部分。然而,随着数据的不断增加&a…...
最新AI创作系统/AI绘画系统/ChatGPT系统+H5源码+微信公众号版+支持Prompt应用
一、AI创作系统 SparkAi创作系统是基于国外很火的ChatGPT进行开发的AI智能问答系统和AI绘画系统。本期针对源码系统整体测试下来非常完美,可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作ChatGPT?小编这里写一个详细图…...
Z410 2023款无人机,专为零基础开发者打造的入门级开源无人机
为什么开发Z410升级款-Easydrone无人机 新手开发者通常在本科阶段加入人工智能行业,对无人机二次开发往往一知半解,面临着C、Python、ROS和mavlink等一系列入门知识,学习起来非常困难,学习的过程中也面临许多挫折。为了帮助零基础…...
elementui修改message消息提示颜色
/* el弹出框样式 */ .el-message {top: 80px !important;border: 0; }.el-message * {color: var(--white) !important;font-weight: 600; }.el-message--success {background: var(--themeBackground); }.el-message--warning {background: var(--gradientBG); }.el-message--…...
Linux和Hadoop的学习
目录 1. Linux的常用快捷键2. Hadoop集群部署问题汇总 1. Linux的常用快捷键 复制:CtrlshiftC 粘贴:CtrlshiftV TAB:补全命令 编写输入:i 退出编写:esc 保存并退出:shift: 2. Hadoop集群部署问…...
通达信指标预警信号,自动发送给微信好友1.0
1.功能介绍:十一节假日期间写了一个,可将股票指标预警信号,自动发送给微信好友/微信群(即电脑端的消息,通过模拟微信操作可在手机上显示)。本工具按通达信写的,如果大智慧,同花顺也能…...
浅谈CDN内容分发与全局负载均衡
CDN简介 CDN的全称是Content Delivery Network,即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,…...
【框架风格】解释器模式
1、描述 解释器框架风格(Interpreter Framework Style)是一种软件架构风格,其核心思想是构建一个解释器(Interpreter)来解释并执行特定领域或问题领域的语言或规则。以下是解释器框架风格的一些特点: 1. 领…...
c++视觉图像线性混合
图像线性混合 使用 cv::addWeighted() 函数对两幅图像进行线性混合。alpha 和 beta 是两幅图像的权重,它们之和应该等于1。gamma 是一个可选的增益,这里设置为0。 你可以通过调整 alpha 的值来改变混合比例。如果 alpha0.5,则两幅图像等权重…...
Doris 2.0.1 DockerFile版 升级实战
1、Doris 2.0.1 DockerFile 的制作 参考 Doris 2.0.1 Dockerfile制作-CSDN博客 2、之前的Doris 集群通过 Docker容器进行的部署,需提前准备好Doris2.0.1的镜像包 参考: 集群升级 - Apache Doris Doris 升级请遵守不要跨两个及以上关键节点版本升级的…...
kotlin aes 加密解密
文章目录 1. key填充2. 加密3. 解密 1. key填充 aes算法对key的字节数有要求 所以对输入的key要做填充处理 fun fillKey(key: String): ByteArray {val random SecureRandom.getInstance("SHA1PRNG")random.setSeed(key.toByteArray())val generator KeyGenerato…...
sqlite3的lib和头文件在哪下载 2023/9/19 上午10:46:43
2023/9/19 上午10:46:43 sqlite3的lib和头文件在哪下载 2023/9/19 上午10:46:54 你可以从SQLite官方网站下载SQLite的lib和头文件。请按照以下步骤进行操作: 打开SQLite官方网站:https://www.sqlite.org/index.html 在页面上方的菜单中选择 “Download”(下载)。 在下载…...
磁通量概述
磁通量指的是设在磁感应强度为B的匀强磁场中,有一个面积为S且与磁场方向垂直的平面,磁感应强度B与面积S的乘积,叫做穿过这个平面的磁通量,简称磁通(Magnetic Flux)。标量,符号“Φ”。在一般情况…...
MySql 终端常用指令
一、开发背景 利用数据库实现数据的增删改查 二、开发环境 Window10 mysql-8.0.33-win64 三、实现步骤 1、管理员模式打开终端 2、登录数据库(停止 开启 登录) 具体指令参考 MySql 安装篇 …...
【React-hooks篇幅】自定义hooks
首先得了解自定义 Hooks 跟普通函数区别在于哪里? Hooks 只应该在 React 函数组件内调用,而不应该在普通函数调用。Hooks 能够调用诸如 useState、useEffect、useContext等,普通函数则不能。由此可以通过内置的Hooks等来获得Firber的访问方式…...
面试算法21:删除倒数第k个节点
题目 如果给定一个链表,请问如何删除链表中的倒数第k个节点?假设链表中节点的总数为n,那么1≤k≤n。要求只能遍历链表一次。 例如,输入图4.1(a)中的链表,删除倒数第2个节点之后的链表如图4.1&a…...
数据结构——排序算法(C语言)
本篇将详细讲一下以下排序算法: 直接插入排序希尔排序选择排序快速排序归并排序计数排序 排序的概念 排序:所谓排序,就是使一串记录,按照其中的某个或某写关键字的大小,按照递增或递减0排列起来的操作。 稳定性的概念…...
基于Http Basic Authentication的接口
Basic Authenrication是 HTTP 用户代理提供用户名的一种方法 ,它是对 Web 资源实施访问控制的最简单技术,它不需要 Cookie、会话标识符和登录页面。HTTP Basic身份验证使用静态的标准HTTP标头,这意味着 不必在预期中进行握手。 当用户代理想…...
【yaml文件的编写】
yaml文件编写 YAML语法格式写一个yaml文件demo创建资源对象查看创建的pod资源创建service服务对外提供访问并测试创建资源对象查看创建的service在浏览器输入 nodeIP:nodePort 即可访问 详解k8s中的port:portnodePorttargetPortcontainerPortkubectl run --dry-runc…...
VScode 高效开发 Springboot 应用的完整指南
1. 环境准备与项目创建 第一次用VScode开发Springboot项目时,我对着空白编辑器发呆了半小时。后来发现只要装对插件,效率能翻倍。先打开VScode的扩展商店,这三个插件是必装的: Java Extension Pack:包含语言支持、调…...
从数据采集到模型部署:用Lerobot+本地数据集训练一个会抓积木的机械臂(避坑指南)
从数据采集到模型部署:用Lerobot本地数据集训练一个会抓积木的机械臂(避坑指南) 当机械臂第一次准确抓取乐高积木并放入指定盒子时,那种成就感远超单纯调通代码的快感。Lerobot框架的出现,让机器人学习从实验室走向个人…...
ArduPilot电机控制逻辑与PWM输出机制剖析
1. ArduPilot电机控制基础概念 当你第一次接触无人机飞控时,最让人困惑的莫过于电机控制逻辑了。想象一下,你手里拿着遥控器,轻轻推动摇杆,无人机就能平稳地上升、下降或者转向。这背后到底发生了什么?让我用最直白的…...
OpenClaw异常处理手册:百川2-13B任务失败排查全攻略
OpenClaw异常处理手册:百川2-13B任务失败排查全攻略 1. 为什么需要这份手册 上周我尝试用OpenClaw百川2-13B模型自动处理日报生成任务时,连续三天凌晨任务失败。每次起床看到控制台的红色错误提示,都要花半小时翻日志找原因。最崩溃的是&am…...
告别Win11无边框窗口的‘残疾’体验:Qt自定义标题栏完美集成Snap Layout保姆级教程
现代Qt应用开发:Win11无边框窗口与Snap Layout深度整合实战 当微软推出Windows 11时,其标志性的Snap Layout功能彻底改变了多窗口管理体验。然而对于使用Qt框架开发无边框窗口应用的开发者来说,这却带来了一个棘手的问题——自定义标题栏与系…...
PyTorch张量拼接实战:torch.stack()与torch.cat()的5个典型场景对比
PyTorch张量拼接实战:torch.stack()与torch.cat()的5个典型场景对比 在深度学习项目中,数据维度的操作就像乐高积木的拼装——选错连接方式可能导致模型结构崩塌。作为PyTorch中高频使用的两种拼接操作,torch.stack()和torch.cat()常被混淆使…...
OpenClaw自动化周报生成:Qwen3-32B私有镜像精准提取Git提交记录
OpenClaw自动化周报生成:Qwen3-32B私有镜像精准提取Git提交记录 1. 为什么需要自动化周报生成 每周五下午,我都会面临同样的困扰:需要从零散的Git提交记录中手动整理本周工作内容,再拼凑成一份结构化的周报。这个过程不仅耗时&a…...
二相四线步进电机驱动全解析:从原理到Proteus仿真避坑指南
二相四线步进电机驱动全解析:从原理到Proteus仿真避坑指南 在工业自动化与嵌入式开发领域,步进电机因其精准的位置控制能力成为不可或缺的执行元件。而二相四线制步进电机凭借结构简单、成本低廉的优势,尤其受到电子工程师和创客群体的青睐。…...
LFM2.5-1.2B-Thinking-GGUF部署指南:ss端口监听+curl health检测标准化运维流程
LFM2.5-1.2B-Thinking-GGUF部署指南:ss端口监听curl health检测标准化运维流程 1. 平台简介 LFM2.5-1.2B-Thinking-GGUF是Liquid AI推出的轻量级文本生成模型,特别适合在资源有限的环境中快速部署和使用。这个镜像内置了GGUF模型文件和llama.cpp运行时…...
AlertDialog高斯模糊进阶指南:Android12新特性与兼容方案对比
AlertDialog高斯模糊进阶指南:Android12新特性与兼容方案对比 在移动应用设计中,视觉层次的营造往往决定了用户体验的优劣。当用户与AlertDialog交互时,背景的高斯模糊效果能够有效聚焦注意力,同时保持界面连贯性。Android 12引入…...
