本記事ではSwiftUIでの画面遷移方法について説明します。SwiftUIでは、以下の3つの基本的な画面遷移方法があります。
画面遷移方法の違い
NavigationLink、sheet、およびフラグによるViewの切り替えは、それぞれ異なる目的と状況で使用されます。それぞれの特性と使用例を示します。
必ずしも以下の使い方が正しいということではなく、筆者の考えも含まれているため状況によって使い分けてください。
| NavigationLink | 最も一般的な画面遷移方法で、新しい画面をナビゲーションスタックにプッシュします。これは、ユーザーがアプリ内を深く探索する際に使用されます。例えば、一覧から詳細画面に遷移する場合などです。 |
| sheet | モーダル遷移で、新しい画面が現在の画面の上にスライドして表示されます。これは、ユーザーが一時的なタスクを完了するため、または追加の情報を入力するために使用されます。例えば、設定を変更する画面や新しい項目を作成する画面などです。 |
| フラグによるViewの切り替え | 画面全体を切り替える方法で、一つの画面から別の画面に完全に切り替えます。これは、アプリの状態が大きく変わる場合に使用されます。例えば、ログイン後の画面切り替えや、タブ切り替えなどです。 |
これらの遷移方法は、それぞれ異なる目的と状況で使用され、適切に使い分けることで、ユーザー体験を向上させることができます。それぞれの遷移方法がどのような状況で最適かを理解し、適切に使い分けることが重要です。既に存在する他のアプリを参考にすると理解しやすいと思います。
画面遷移方法の解説
それぞれの画面遷移方法について説明していきます
NavigationLinkによる画面遷移
NavigationLinkを使用すると次のような動作となります
遷移先のViewには自動的にback(戻る)ボタンが表示されます
プログラムの例
import SwiftUI
struct DetailLinkSampleView1: View {
var body: some View {
NavigationStack {
NavigationLink("Tapして2つ目のViewへ移動する") {
DetailLinkSampleView2()
}
}
.navigationBarTitle("View1")
}
}
struct DetailLinkSampleView2: View {
var body: some View {
Text("詳細View")
.navigationBarTitle("詳細View")
}
}NavigationLinkを使用した画面遷移を管理するための主要な2つのコンポーネントはNavigationStackとNavigationLinkです
sheetによる画面遷移
sheetを使用すると次のような動作となります
下から画面が覆い被さるように遷移先のViewが表示され、遷移元の画面が少し見えるような動作が特徴です
プログラムの例
import SwiftUI
struct DetailLinkSampleView1: View {
@State private var isShowingSheet = false
var body: some View {
Button(action: {
isShowingSheet.toggle()
}) {
Text("Tapして2つ目のViewへ移動する")
}
.sheet(isPresented: $isShowingSheet) {
DetailLinkSampleView2(isShowingSheet: $isShowingSheet)
}
.navigationBarTitle("View1")
}
}
struct DetailLinkSampleView2: View {
@Binding var isShowingSheet: Bool
var body: some View {
VStack {
Text("詳細View")
Button("閉じる") {
isShowingSheet = false
}
}
.navigationBarTitle("詳細View")
}
}ボタンをタップすることでisShowingSheetのフラグを変化させています。コード例ではisShowingSheetがTrueになると詳細VIewが表示されます。
なお『.sheetモディファイア』はフラグを制御できればボタン以外に付与しても動作します。
遷移先のViewにおいて、画面を閉じる方法には、次の3通りの方法があります。コード例では２番の表示フラグであるisShowingSheetを書き換える方法を用いています。
- 画面をスワイプで下げる。
- シートの表示フラグをfalseに書き換える。
- 環境変数で取得したdismissハンドラーを使用する。
以下に、dismissハンドラーを使用する例を示します。isShowingSheetフラグを使用せずに画面を閉じることができます。
struct DetailLinkSampleView2: View {
@Environment(\.dismiss) var dismiss
@Binding var isShowingSheet: Bool
var body: some View {
VStack {
Text("詳細View")
Button("閉じる") {
dismiss()
}
}
.navigationBarTitle("詳細View")
}
}フラグによるViewの切り替え
フラグにより表示するViewを切り替えることも可能です
プログラムの例
import SwiftUI
struct DetailLinkSampleView1: View {
@State private var isShowingView: Bool = true
var body: some View {
VStack {
if isShowingView {
DetailLinkSampleView2()
} else {
DetailLinkSampleView3()
}
Button {
isShowingView.toggle()
} label: {
Text("フラグ切替")
}
}
}
}
struct DetailLinkSampleView2: View {
var body: some View {
Text("View2")
.navigationBarTitle("View2")
}
}
struct DetailLinkSampleView3: View {
var body: some View {
Text("View3")
.navigationBarTitle("View3")
}
}ボタンをタップすることでisShowingViewのフラグを変化させています。コード例ではisShowingSheetがTrueになるとView2が表示され、FalseになるとView3が表示されます。
応用すると３画面以上のViewの切り替えなどを実装することも可能です。また、if文以外でもSwitch文で実装したり、フラグ以外のプロパティを用いてもよいでしょう。
まとめ
本記事では画面遷移について基本的な知識を記事にしました。コード例は最低限の画面遷移が動作する内容です。プロパティや引数などの理解を深めると応用した実装もできます。
コメント