一同养成写作习惯!这是我参加「日新计划 4 月更文挑战」的第14天,点击检查活动概况。

前语:

当写这章的时分,发现以前仍是关于这块内容的“高级用法”,但想了想,仍是先不写那么深化,担心扩大起来内容太多,并且难以消化,就只罗列了简略的运用办法。

之后的章节中,会考虑逐步深化下去,当讲完了SwiftUI基础功用的运用办法,后面也会考虑出一些实战项目的案例,让SwiftUI爱好者能够真实地写项目。

今日职言:努力工作,尽情玩乐。

在本章中,你将学会运用模态弹窗完结页面跳转、自界说回来。

在上一章中,咱们学习了运用NavigationView导航栏进行页面的跳转,这是常见的页面跳转的一种办法。

而另一种翻开新页面的办法在iPhone中也很常见,就是从底部向上弹出一个新页面。

SwiftUI极简教程14:ModalView模态弹窗使用

咱们能够看到,这个页面又不完全是“进入”了一个新页面,它答应用户向下滑动封闭页面,这无疑大大增强了用户体会。

这时分给用户的感觉就是没有“打断”或者“搅扰”用户的操作,并且完结了用户想做的工作。

本章节将分成3个部分解说。

1、根据模态弹窗的页面跳转;

2、模态弹窗的自界说回来;

3、Alerts正告弹窗;

好了,说了那么多,咱们开端吧。

榜首部分:根据模态弹窗的页面跳转

首要,咱们先创立一个新项目,命名为SwiftUIModalView。

SwiftUI极简教程14:ModalView模态弹窗使用

咱们测验下简略的模态弹窗的跳转。

比方,咱们在榜首个页面创立一个按钮,当咱们点击这个按钮时,翻开一个模态弹窗页面。

如何创立按钮,能够了解下之前的文章。

创立按钮的代码如下:

//按钮
Button(action: {
// 点击按钮跳转翻开模态弹窗
}) {
// 按钮款式
Text("翻开模态弹窗")
.font(.system(size: 14))
.frame(minWidth: 0, maxWidth: .infinity)
.padding()
.foregroundColor(.white)
.background(Color(red: 51 / 255, green: 51 / 255, blue: 51 / 255))
.cornerRadius(5)
.padding(.horizontal, 20)
}

SwiftUI极简教程14:ModalView模态弹窗使用

然后,咱们需求再创立一个新的页面,便利咱们完成从榜首个页面点击按钮,以模态弹窗的办法翻开第二个页面。

这儿,咱们根据上一章的内容,创立一个页面叫做DetailView。

在DetailView咱们就放个文字简略阐明下。

// 概况页
struct DetailView: View {
var body: some View {
Text("这是一个新页面")
}
}

SwiftUI极简教程14:ModalView模态弹窗使用

接下来,咱们完成下运用模态弹窗的跳转办法。

.sheet(isPresented: $showDetailView) {
  //要跳转的页面
}

模态弹窗的办法很简略,运用.sheet修饰符。

isPresented是模态弹窗的触发条件,需求用$绑定一个操作,咱们一般界说一个布尔值,它的初始状况为false。

@State var showDetailView = false

当咱们在榜首个页面点击按钮时,按钮的操作就把这个布尔值变成true,那么就能够同时触发.sheet翻开模态弹窗。

这儿咱们界说了一个叫做showDetailView的参数,它是bool类型,并且初始值为false。

当咱们点击按钮时,showDetailView切换状况。

self.showDetailView.toggle()

SwiftUI极简教程14:ModalView模态弹窗使用

咱们点击模拟器上的Preview试下作用。

点击按钮后,咱们能够看到体系翻开了咱们界说好的模态弹窗页面DetailView了。

完好代码如下:

import SwiftUI
struct ContentView: View {
@State var showDetailView = false
var body: some View {
// 按钮
Button(action: {
// 点击按钮跳转翻开模态弹窗
self.showDetailView.toggle()
}) {
// 按钮款式
Text("翻开模态弹窗")
.font(.system(size: 14))
.frame(minWidth: 0, maxWidth: .infinity)
.padding()
.foregroundColor(.white)
.background(Color(red: 51 / 255, green: 51 / 255, blue: 51 / 255))
.cornerRadius(5)
.padding(.horizontal, 20)
}
.sheet(isPresented: $showDetailView) {
DetailView()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
// 概况页
struct DetailView: View {
var body: some View {
Text("这是一个新页面")
}
}

SwiftUI极简教程14:ModalView模态弹窗使用

第二部分:模态弹窗的自界说回来

在DetailView页面里,咱们能够经过向下拖动页面,完成封闭页面的作用。

咱们也能够测验给DetailView加上一个封闭按钮,当咱们点击封闭按钮时,也封闭这个页面。

还记得上一章咱们学习过的NavigationView导航栏吗?咱们能够给DetailView内容加上导航,然后导航右边加一个按钮操作。

// 概况页
struct DetailView: View {
var body: some View {
NavigationView {
//主体内容
Text("这是一个新页面")
.navigationBarItems(trailing: Button(action: {
// 点击按钮封闭弹窗
}) {
Image(systemName: "chevron.down.circle.fill")
.foregroundColor(.gray)
}
)
}
}
}

SwiftUI极简教程14:ModalView模态弹窗使用

好了,咱们看到在DetailView导航栏右上角创立了一个新按钮。

那么接下来,咱们要完成点击按钮,封闭弹窗。

这儿咱们有两种办法。

办法1:

和上一章NavigationView导航栏相同,创立一个环境变量:

@Environment(\.presentationMode) var presentationMode

然后当咱们点击按钮时,调用它的函数办法。

self.presentationMode.wrappedValue.dismiss()

点击模拟器的Preview,咱们发现完成了点击操作,封闭当时的模态弹窗页面。

完好代码如下:

// 概况页
struct DetailView: View {
//界说环境变量
@Environment(\.presentationMode) var presentationMode
var body: some View {
NavigationView {
//主体内容
Text("这是一个新页面")
.navigationBarItems(trailing: Button(action: {
// 点击按钮封闭弹窗
self.presentationMode.wrappedValue.dismiss()
}) {
Image(systemName: "chevron.down.circle.fill")
.foregroundColor(.gray)
}
)
}
}
}

SwiftUI极简教程14:ModalView模态弹窗使用

办法2:

也是之前的章节学习过State状况和Binding绑定的运用。

咱们能够在DetailView页面用@Binding绑定榜首个页面创立的showDetailView布尔值。

//绑定参数
@Binding var showDetailView: Bool

然后在DetailView页面,点击按钮操作时,将showDetailView的值切换。

self.showDetailView.toggle()

最后在主页中.sheet跳转的目标页面绑定参数回来。

.sheet(isPresented: $showDetailView) {
 DetailView(showDetailView: $showDetailView)
}

这样,咱们也能够完成页面的回来操作。

DetailView页面完好代码如下:

// 概况页
struct DetailView: View {
//绑定参数
@Binding var showDetailView: Bool
var body: some View {
NavigationView {
//主体内容
Text("这是一个新页面")
.navigationBarItems(trailing: Button(action: {
// 点击按钮封闭弹窗
self.showDetailView.toggle()
}) {
Image(systemName: "chevron.down.circle.fill")
.foregroundColor(.gray)
}
)
}
}
}

SwiftUI极简教程14:ModalView模态弹窗使用

那么两种办法有什么不同呢?

榜首种办法简略来说,是“撤销”原有的操作。

而第二种绑定的办法,是反向传递参数值给到榜首个页面。

两种办法各有好处,第二种办法的好处是假如第二个页面回来的时分需求带参数值回来,那么咱们能够经过绑定的办法将DetailView的值给回到榜首个页面。

第三部分:Alerts正告弹窗

在模态弹窗中,还有一种类型叫做Alerts正告弹窗,也属于模态弹窗的一种。

咱们在App也经常见过它,当咱们承认要付款时,或者触发到有风险的操作时,体系就会翻开Alerts正告弹窗。

Alerts正告弹窗一种二次承认的弹窗,常用于体系风险提示、是否立即执行等场景。

SwiftUI极简教程14:ModalView模态弹窗使用

创立正告弹窗的办法和创立一般的模态弹窗办法相同,只是参数不相同。

.alert(isPresented: $showAlert) {
//Alerts结构体
}

咱们仍是运用isPresented触发,咱们界说一个变量showAlert的状况,初始状况是false。

@State var showAlert= false

与创立规范模态弹窗不同的是,.alert里边的内容是Alerts结构体,也就是规范的正告弹窗。

咱们运用Alert结构体来创立正告弹窗。

Alert(title: Text("这是弹窗标题"), message: Text("这是弹窗的内容"), primaryButton: .default(Text("承认")), secondaryButton: .cancel(Text("取消")))

基本了解了正告弹窗的用法,让咱们实操试试吧。

咱们把DetailView页面的文字改成“翻开正告弹窗”,然后把它变成按钮的方式。

以便于咱们点击文字按钮,完成翻开正告弹窗的作用。

//主体内容
 Button(action: {
  // 点击按钮翻开正告弹窗
  }) {
   Text("翻开正告弹窗")
  }

SwiftUI极简教程14:ModalView模态弹窗使用

然后咱们将正告弹窗的办法写到DetailView页面里边,办法和主页中.sheet的办法类似。

先界说一个变量showAlert,初始值为false,当按钮点击的时分,showAlert的状况切换。

在Text按钮外边(留意位置),运用.alert的创立一个正告弹窗,然后在正告弹窗内容里填充Alerts结构体代码。

这样就完结了Alerts正告弹窗的创立。

DetailView完好代码如下:

// 概况页
struct DetailView: View {
// 绑定参数
@Binding var showDetailView: Bool
@State var showAlert = false
var body: some View {
NavigationView {
// 主体内容
Button(action: {
// 点击按钮翻开正告弹窗
self.showAlert.toggle()
}) {
Text("翻开正告弹窗")
}
.alert(isPresented: $showAlert) {
//Alerts结构体
Alert(title: Text("这是弹窗标题"), message: Text("这是弹窗的内容"), primaryButton: .default(Text("承认")), secondaryButton: .cancel(Text("取消")))
}
.navigationBarItems(trailing: Button(action: {
// 点击按钮封闭弹窗
self.showDetailView.toggle()
}) {
Image(systemName: "chevron.down.circle.fill")
.foregroundColor(.gray)
}
)
}
}
}

SwiftUI极简教程14:ModalView模态弹窗使用

快来着手试试吧!

假如本专栏对你有协助,不妨点赞、评论、重视~