一緒に書く習慣を身につけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して14日目です。クリックしてイベントの詳細をご覧ください。
序文：
この章を書いていると、以前はまだこのコンテンツの「高度な使い方」だったのですが、考えてみたら、最初はあまり詳しく書いていなかったので、内容が多すぎるのではないかと心配していました。展開すると消化が難しいので、簡単な使い方だけを挙げました。
次の章では、さらに深く掘り下げていきます。SwiftUIの基本機能の使い方について話し終えたら、実際のプロジェクトのいくつかのケースについても検討し、SwiftUI愛好家が実際にプロジェクトを作成できるようにします。
今日のモットー：一生懸命働き、楽しんでください。
この章では、モーダルポップアップウィンドウを使用してページジャンプとカスタムリターンを完了する方法を学習します。
前の章では、NavigationViewナビゲーションバーを使用してページ間をジャンプする方法を学びました。これは、ページジャンプの一般的な方法です。
新しいページを開くもう1つの方法は、iPhoneでも一般的ですが、下から新しいページをポップアップすることです。
このページは新しいページに完全に「入る」わけではなく、ユーザーが下にスワイプしてページを閉じることができるため、ユーザーエクスペリエンスが大幅に向上することは間違いありません。
このとき、ユーザーは、操作に「中断」や「干渉」がないと感じ、やりたいことが完了します。
この章は3部に分かれています。
1.モーダルポップアップウィンドウに基づくページジャンプ。
2.モーダルポップアップウィンドウのカスタムリターン。
3.警告ポップアップウィンドウを警告します。
さて、十分に言って、始めましょう。
パート1：モーダルポップアップに基づくページジャンプ
まず、新しいプロジェクトを作成し、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)
}
复制代码次に、新しいページを作成して、最初のページのボタンをクリックして、モーダルポップアップウィンドウで2番目のページを開くことができるようにする必要があります。
ここでは、前の章の内容に基づいて、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)
}
)
}
}
}
复制代码那么两种方法有什么不同呢？
第一种方法简单来说，是“撤销”原有的操作。
而第二种绑定的方式，是反向传递参数值给到第一个页面。
どちらのメソッドにも独自の利点があります。2番目のメソッドの利点は、2番目のページがパラメーター値とともに戻る必要がある場合、バインドによってDetailViewの値を最初のページに返すことができることです。
パート3：アラート警告ポップアップ
モーダルポップアップウィンドウには、アラート警告ポップアップウィンドウと呼ばれる別のタイプがあります。これもモーダルポップアップウィンドウのタイプです。
また、アプリでもよく見られます。支払いを行うか、危険な操作をトリガーすると、システムはアラート警告ポップアップウィンドウを開きます。
アラート警告ポップアップウィンドウは、二次確認用のポップアップウィンドウであり、システムリスクリマインダーやすぐに実行するかどうかなどのシナリオでよく使用されます。
警告ポップアップを作成する方法は、一般的なモーダルポップアップを作成する方法と同じですが、パラメーターが異なります。
.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ページのテキストを「OpenAlertPopup」に変更し、ボタン形式に変更しました。
テキストボタンをクリックして、警告ポップアップウィンドウを開く効果を実現できるようにします。
//主体内容
Button(action: {
// 点击按钮打开警告弹窗
}) {
Text("打开警告弹窗")
}
复制代码次に、警告ポップアップウィンドウのメソッドをDetailViewページに書き込みます。これは、ホームページの.sheetのメソッドに似ています。
最初に変数showAlertを定義します。初期値はfalseで、ボタンがクリックされると、showAlertの状態が切り替わります。
[テキスト]ボタン（場所をメモ）の外側で、.alertを使用してアラートポップアップを作成し、アラートポップアップコンテンツにアラート構造コードを入力します。
これで、アラート警告ポップアップの作成が完了しました。
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)
}
)
}
}
}
复制代码是非、お試しください！
このコラムがお役に立てば、いいね、コメント、フォローしてください〜