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

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

二次提醒:使用警告弹窗提示用户

上面我们实现了滑动删除的操作,但操作太直接了,可能存在用户误操作的情况。为了避免用户误操作,我们可以增加一层判断机制。当用户唤起删除操作时提醒用户当前正在执行删除操作,请求用户的二次确认,用户确认后方可执行删除。

这种强提醒的用户场景下,我们可以使用警告弹窗告知用户。警告弹窗和模态弹窗的使用方式类型,需要提前声明一个是否打开警告弹窗的变量,如下代码所示:


@State var showDeleteAlert: Bool = false

对于删除使用的警告弹窗,我们可以单独构建警告弹窗视图,然后再调用,如下代码所示:


// 删除弹窗
    private var deleteAlert: Alert {
        let alert = Alert(title: Text(""), message: Text("确定要删除吗?"), primaryButton: .destructive(Text("确认")) {
        }, secondaryButton: .cancel(Text("取消")))
        return alert
    }

image.png

上述代码中,我们创建了一个警告弹窗deleteAlert,视图类型为Alert弹窗。在deleteAlert弹窗中,我们设置了Alert的标题、副标题、主要按钮、取消按钮,最终返回这个Alert样式给到deleteAlert。

要使用Alert弹窗的方式也比较简单,可以使用alert弹窗修饰符,如下代码所示:


image.png

//打开删除确认弹窗
.alert(isPresented: $showDeleteAlert, content: { deleteAlert })

image.png

上述代码中,我们给整个卡片视图添加了alert警告弹窗修饰符,并绑定打开弹窗的参数showDeleteAlert,警告弹窗的内容为我们单独构建的deleteAlert删除弹窗视图。

然后我们可以再拖动判断删除的时候触发打开删除弹窗,在删除弹窗中点击确定时,调用删除方法,如下代码所示:


self.showDeleteAlert.toggle()

image.png

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

image.png


相关文章
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)(3)
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)
42 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)(3)
|
存储 安全 容器
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)(5)
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)
69 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)(5)
|
JSON API 数据格式
实战教程·元宇宙来了,准备好你的电子名片了吗?(五)(4)
实战教程·元宇宙来了,准备好你的电子名片了吗?(五)
68 0
|
存储 JSON 测试技术
实战教程·元宇宙来了,准备好你的电子名片了吗?(五)(2)
实战教程·元宇宙来了,准备好你的电子名片了吗?(五)
57 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(五)(2)
|
存储 数据库 Swift
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(3)
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)
76 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(3)
|
数据库
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(4)
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)
55 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(4)
|
存储 前端开发 数据库
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(6)
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)
66 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(6)
实战教程·元宇宙来了,准备好你的电子名片了吗?(二)(2)
实战教程·元宇宙来了,准备好你的电子名片了吗?(二)
62 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(二)(2)
实战教程·元宇宙来了,准备好你的电子名片了吗?(四)(3)
实战教程·元宇宙来了,准备好你的电子名片了吗?(四)
59 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(四)(3)
|
程序员 人机交互 Swift
实战教程·元宇宙来了,准备好你的电子名片了吗?(六)(3)
实战教程·元宇宙来了,准备好你的电子名片了吗?(六)
71 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(六)(3)