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

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

关闭弹窗:双向绑定或全局变量

实现打开模态弹窗后,我们来实现关闭模态弹窗,下面我们来介绍两种关闭模态弹窗的方法:双向绑定、全局变量。

由于我们在ContentView个人主页声明了一个变量showNewView来打开模态弹窗,当点击addBtn按钮时更新其状态。因此我们也可以在NewView页面中也声明一个双向绑定的变量showNewView,并在点击closeBtn时更新其状态,实现关闭弹窗的交互。

首先先声明一个双向绑定的变量showNewView如下图所示:

@Binding var showNewView:Bool

然后在点击closeBtn关闭按钮时更新其状态,如下代码所示:

self.showNewView.toggle()

由于使用@Binding声明变量,因此在NewView视图中声明的变量缺少赋值,将可能导致无法预览,因此我们在预览时需要给NewView视图赋予默认值,如下代码所示:


NewView(showNewView: .constant(false))

image.png

建立双向绑定的视图,在所有页面也都需要进行@Binding声明变量的绑定,因此我们回到ContentView视图中,绑定showNewView变量,如下代码所示:

NewView(showNewView: $showNewView)

image.png

完成后,可以在模拟器中操作打开模态弹窗和关闭模态弹窗的交互。

另一种关闭模态弹窗的方法是声明一个全局变量,实现关闭弹窗的效果,如下代码所示:

//声明环境变量
@Environment(.presentationMode) var presentationMode
//调用
self.presentationMode.wrappedValue.dismiss()

image.png

上述代码中,我们声明了一个全局变量presentationMode,在点击closeBtn关闭按钮的时候调用presentationMode全局变量的wrappedValue.dismiss方法实现关闭弹窗效果。

两种方式在实际开发过程中均有使用,除模态弹窗外,在页面之间使用入栈出栈的方式进行切换页面也经常会用到。

在模态弹窗交互逻辑中更经常使用全局变量关闭弹窗的方式,无需进行双向绑定已经给视图添加默认值,也就无需示例在其他页面缺少绑定参数的麻烦。

本章小结

在本章中,我们主要实现了使用数据模型和List列表来构建身份卡片视图的内容,在减少代码量的同时,其实也是为了之后对身份卡片进行新增、编辑、删除做前期准备。

在SwiftUI中,复杂的具有相似结构的界面设计,通常会使用List列表和ForEach来实现,常见的类似Todo待办事项App中的卡片列表、信息流App的信息列表、短视频平台的视频封面卡片视图等等。

另外我们还学习了使用NavigationStack导航菜单控件(iOS16版本及以上机型使用,低于此版本机型使用NavigationView,Apple经常会在新控件完善后弃用旧控件,这点有点烦)及其标题、导航按钮修饰符的使用,并进一步了解了使用sheet模态弹窗修饰符打开弹窗。关闭弹窗部分,我们介绍了两种方式实现关闭弹窗,并简单介绍了其使用特点。

在下面的章节中,我们将继续完成“添加身份卡”页面的相关操作,请保持期待吧~

相关文章
|
存储 JSON 缓存
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(1)
实战教程·元宇宙来了,准备好你的电子名片了吗?
79 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(1)
|
JSON API 数据格式
实战教程·元宇宙来了,准备好你的电子名片了吗?(五)(4)
实战教程·元宇宙来了,准备好你的电子名片了吗?(五)
65 0
|
存储 前端开发 数据库
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(6)
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)
60 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(6)
|
数据库
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(4)
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)
51 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(4)
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(5)
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)
50 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(5)
实战教程·元宇宙来了,准备好你的电子名片了吗?(六)(2)
实战教程·元宇宙来了,准备好你的电子名片了吗?(六)
59 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(六)(2)
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)(4)
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)
56 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)(4)
实战教程·元宇宙来了,准备好你的电子名片了吗?(四)(3)
实战教程·元宇宙来了,准备好你的电子名片了吗?(四)
55 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(四)(3)
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)(2)
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)
61 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)(2)
|
程序员 人机交互 Swift
实战教程·元宇宙来了,准备好你的电子名片了吗?(六)(3)
实战教程·元宇宙来了,准备好你的电子名片了吗?(六)
68 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(六)(3)