二次提醒:使用警告弹窗提示用户
上面我们实现了滑动删除的操作,但操作太直接了,可能存在用户误操作的情况。为了避免用户误操作,我们可以增加一层判断机制。当用户唤起删除操作时提醒用户当前正在执行删除操作,请求用户的二次确认,用户确认后方可执行删除。
这种强提醒的用户场景下,我们可以使用警告弹窗告知用户。警告弹窗和模态弹窗的使用方式类型,需要提前声明一个是否打开警告弹窗的变量,如下代码所示:
@State var showDeleteAlert: Bool = false
对于删除使用的警告弹窗,我们可以单独构建警告弹窗视图,然后再调用,如下代码所示:
// 删除弹窗 private var deleteAlert: Alert { let alert = Alert(title: Text(""), message: Text("确定要删除吗?"), primaryButton: .destructive(Text("确认")) { }, secondaryButton: .cancel(Text("取消"))) return alert }
上述代码中,我们创建了一个警告弹窗deleteAlert,视图类型为Alert弹窗。在deleteAlert弹窗中,我们设置了Alert的标题、副标题、主要按钮、取消按钮,最终返回这个Alert样式给到deleteAlert。
要使用Alert弹窗的方式也比较简单,可以使用alert弹窗修饰符,如下代码所示:
//打开删除确认弹窗 .alert(isPresented: $showDeleteAlert, content: { deleteAlert })
上述代码中,我们给整个卡片视图添加了alert警告弹窗修饰符,并绑定打开弹窗的参数showDeleteAlert,警告弹窗的内容为我们单独构建的deleteAlert删除弹窗视图。
然后我们可以再拖动判断删除的时候触发打开删除弹窗,在删除弹窗中点击确定时,调用删除方法,如下代码所示:
self.showDeleteAlert.toggle()
完成之后,我们再在模拟器中预览下操作后的效果,如下图所示: