方法新增:增加“删除身份卡”的方法
调整完“添加身份卡”方法后,我们来补充“删除身份卡”方法。删除身份卡的方法和添加身份卡方法一样,我们可以在ViewModel视图模型中创建,如下代码所示:
// 删除身份卡片 func deleteItem(itemId: UUID) { models.removeAll(where: {$0.id == itemId}) }
上述代码中,我们创建了一个删除身份卡片的方法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("删除") }) }
上述代码中,我们给CardView卡片视图添加了一个上下文菜单的交互操作,当点击CardView卡片时,唤起上下文菜单,点击菜单按钮调用viewModel视图模型的deleteItem删除方法,指定删除的卡片id为点击卡片的UUID。
我们长按点击卡片预览下效果,如下图所示:
上面的方法是使用contextMenu上下文菜单实现身份卡片的方法,比较简单。
项目预览
完成后,我们在模拟器中预览下效果,如下图所示:
项目小结
在本章中,我们学习了Model-View-ViewModel模型-视图-模型视图架构模式进行项目的开发,将使用URLSession API实现网络请求,将JSON数据文件从云端请求到本地渲染,其中对于JSON文件缺少UUID的处理至关重要。
功能方法方面,我们在ViewModel视图模型中创建了addCard添加身份卡方法替换了原有在View视图中实现的操作逻辑,进一步地,我们创建了deleteItem删除身份卡方法,通过识别当前卡片的UUID,指定卡片进行删除操作。
自此,Linkworld项目的功能越来越完善了,但还不够好。接下来的章节,我们介绍另一种删除数据项的交互,以及编辑页面、排序等功能的实现,请保持期待吧~