实战教程·元宇宙来了,准备好你的电子名片了吗?(五)(4)

简介: 实战教程·元宇宙来了,准备好你的电子名片了吗?(五)

方法新增:增加“删除身份卡”的方法

调整完“添加身份卡”方法后,我们来补充“删除身份卡”方法。删除身份卡的方法和添加身份卡方法一样,我们可以在ViewModel视图模型中创建,如下代码所示:


// 删除身份卡片
func deleteItem(itemId: UUID) {
    models.removeAll(where: {$0.id == itemId})
}

image.png

上述代码中,我们创建了一个删除身份卡片的方法deleteItem,传入身份卡片数据的UUID,作为索引找到对应的身份卡片,然后调用removeAll方法,删除models数组中对应UUID对传入的UUID的数据,实现删除数据的操作。

回到ContentView页面,我们创建一个简单的删除身份卡的交互,使用contextMenu上下文菜单按钮搭建删除交互,如下代码所示:


// 卡片视图
CardView(platformIcon: item.platformIcon, title: item.title, platformName: item.platformName, indexURL: item.indexURL)
// 长按唤起删除
.contextMenu {
  Button(action: {
    self.viewModel.deleteItem(itemId: item.id)
  }, label: {
    Text("删除")
  })
}

image.png

上述代码中,我们给CardView卡片视图添加了一个上下文菜单的交互操作,当点击CardView卡片时,唤起上下文菜单,点击菜单按钮调用viewModel视图模型的deleteItem删除方法,指定删除的卡片id为点击卡片的UUID。

我们长按点击卡片预览下效果,如下图所示:

image.png

上面的方法是使用contextMenu上下文菜单实现身份卡片的方法,比较简单。

项目预览

完成后,我们在模拟器中预览下效果,如下图所示:

项目小结

在本章中,我们学习了Model-View-ViewModel模型-视图-模型视图架构模式进行项目的开发,将使用URLSession API实现网络请求,将JSON数据文件从云端请求到本地渲染,其中对于JSON文件缺少UUID的处理至关重要。

功能方法方面,我们在ViewModel视图模型中创建了addCard添加身份卡方法替换了原有在View视图中实现的操作逻辑,进一步地,我们创建了deleteItem删除身份卡方法,通过识别当前卡片的UUID,指定卡片进行删除操作。

自此,Linkworld项目的功能越来越完善了,但还不够好。接下来的章节,我们介绍另一种删除数据项的交互,以及编辑页面、排序等功能的实现,请保持期待吧~

相关文章
|
7月前
|
存储 JSON 缓存
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(1)
实战教程·元宇宙来了,准备好你的电子名片了吗?
54 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(1)
|
7月前
|
存储 安全 容器
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)(5)
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)
49 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)(5)
|
7月前
|
存储 XML Swift
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(2)
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)
55 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(2)
|
7月前
|
存储 JSON 测试技术
实战教程·元宇宙来了,准备好你的电子名片了吗?(五)(2)
实战教程·元宇宙来了,准备好你的电子名片了吗?(五)
35 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(五)(2)
|
7月前
|
数据库
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(4)
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)
33 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(4)
|
7月前
|
存储 前端开发 数据库
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(6)
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)
40 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(6)
|
7月前
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(5)
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)
34 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(5)
|
7月前
|
程序员 人机交互 Swift
实战教程·元宇宙来了,准备好你的电子名片了吗?(六)(3)
实战教程·元宇宙来了,准备好你的电子名片了吗?(六)
50 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(六)(3)
|
7月前
实战教程·元宇宙来了,准备好你的电子名片了吗?(四)(3)
实战教程·元宇宙来了,准备好你的电子名片了吗?(四)
39 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(四)(3)
|
7月前
实战教程·元宇宙来了,准备好你的电子名片了吗?(二)(2)
实战教程·元宇宙来了,准备好你的电子名片了吗?(二)
35 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(二)(2)