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

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

前语：

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

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

今日职言：努力工作，尽情玩乐。

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

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

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

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

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

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

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

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

3、Alerts正告弹窗；

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

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

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

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

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

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

创立按钮的代码如下：

//按钮
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)
}

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

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

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

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

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

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

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

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

@State var showDetailView = false

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

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

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

self.showDetailView.toggle()

咱们点击模拟器上的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("这是一个新页面")
}
}

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

在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)
}
)
}
}
}

好了，咱们看到在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)
}
)
}
}
}

办法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)
}
)
}
}
}

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

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

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

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

第三部分：Alerts正告弹窗

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

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

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

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

.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("翻开正告弹窗")
  }

然后咱们将正告弹窗的办法写到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)
}
)
}
}
}

快来着手试试吧！

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