关闭弹窗:双向绑定或全局变量
实现打开模态弹窗后,我们来实现关闭模态弹窗,下面我们来介绍两种关闭模态弹窗的方法:双向绑定、全局变量。
由于我们在ContentView个人主页声明了一个变量showNewView来打开模态弹窗,当点击addBtn按钮时更新其状态。因此我们也可以在NewView页面中也声明一个双向绑定的变量showNewView,并在点击closeBtn时更新其状态,实现关闭弹窗的交互。
首先先声明一个双向绑定的变量showNewView如下图所示:
@Binding var showNewView:Bool
然后在点击closeBtn关闭按钮时更新其状态,如下代码所示:
self.showNewView.toggle()
由于使用@Binding声明变量,因此在NewView视图中声明的变量缺少赋值,将可能导致无法预览,因此我们在预览时需要给NewView视图赋予默认值,如下代码所示:
NewView(showNewView: .constant(false))
建立双向绑定的视图,在所有页面也都需要进行@Binding声明变量的绑定,因此我们回到ContentView视图中,绑定showNewView变量,如下代码所示:
NewView(showNewView: $showNewView)
完成后,可以在模拟器中操作打开模态弹窗和关闭模态弹窗的交互。
另一种关闭模态弹窗的方法是声明一个全局变量,实现关闭弹窗的效果,如下代码所示:
//声明环境变量 @Environment(.presentationMode) var presentationMode //调用 self.presentationMode.wrappedValue.dismiss()
上述代码中,我们声明了一个全局变量presentationMode,在点击closeBtn关闭按钮的时候调用presentationMode全局变量的wrappedValue.dismiss方法实现关闭弹窗效果。
两种方式在实际开发过程中均有使用,除模态弹窗外,在页面之间使用入栈出栈的方式进行切换页面也经常会用到。
在模态弹窗交互逻辑中更经常使用全局变量关闭弹窗的方式,无需进行双向绑定已经给视图添加默认值,也就无需示例在其他页面缺少绑定参数的麻烦。
本章小结
在本章中,我们主要实现了使用数据模型和List列表来构建身份卡片视图的内容,在减少代码量的同时,其实也是为了之后对身份卡片进行新增、编辑、删除做前期准备。
在SwiftUI中,复杂的具有相似结构的界面设计,通常会使用List列表和ForEach来实现,常见的类似Todo待办事项App中的卡片列表、信息流App的信息列表、短视频平台的视频封面卡片视图等等。
另外我们还学习了使用NavigationStack导航菜单控件(iOS16版本及以上机型使用,低于此版本机型使用NavigationView,Apple经常会在新控件完善后弃用旧控件,这点有点烦)及其标题、导航按钮修饰符的使用,并进一步了解了使用sheet模态弹窗修饰符打开弹窗。关闭弹窗部分,我们介绍了两种方式实现关闭弹窗,并简单介绍了其使用特点。
在下面的章节中,我们将继续完成“添加身份卡”页面的相关操作,请保持期待吧~