SwiftUIで画面遷移する方法【NavigationView と NavigationLink】

SwiftUI で画面遷移するには NavigationView と NavigationLink 使います。

まずはシンプルな動作として、以下の動画のプログラムを確認してみましょう。

SwiftUIで画面遷移する方法

NavigationView

まず、遷移元の画面は NavigationView で囲う必要があります。これが抜けていると、この後解説する NavigationLink を設置しても遷移することができません。

var body: some View {
    NavigationView {
        Text("Hello World.")
    }
}

NavigationLink

NavigationView と名前が似ていますが全く異なるもので、 NavigationLink は一種のボタンです。文字列や画像などを背景に設定し、タップすると画面遷移することができます。

イニシャライザーには複数ありますが、今回は２つ紹介します。

① NavigationLink(title: StringProtocol>, destination: _)
② NavigationLink(destination: _, isActive: Binding<Bool>, label: () -> _)

title: StringProtocol ボタンのタイトルを指定します。
destination: _ 遷移先の View を指定します。
isActive: Binding<Bool> @State で宣言した Bool 値変数を $マークを接頭辞に付けて指定します。この Bool 値が true となると画面遷移が発動します。
label: () -> _ には何かしら表示したい View を指定します。Text や Image を指定することができ、この部分をタップすることでも画面遷移が発動します。

①のパターン

シンプルに、NavigationLink 部分をタップすると SecondView に遷移します。

struct FirstView: View {
    var body: some View {
        NavigationView {
            NavigationLink("Push to SecondView.", destination: SecondView())
        }
    }
}

struct SecondView: View {
    var body: some View {
        Text("SecondView")
    }
}

②のパターン

struct FirstView: View {

    @State private var toSecondView = false
    @State private var showAlert = false

    var body: some View {
        NavigationView {
            VStack {
                Button(action: {
                    self.showAlert = true
                }, label: {
                    Text("クリックしてください")
                })
                NavigationLink(destination: SecondView(), isActive: $toSecondView) {
                    EmptyView()
                }
            }
            .alert(isPresented: $showAlert) {
                Alert(title: Text(""), message: Text("次の画面へ進みますか？"), primaryButton: .default(Text("はい"), action: {
                    self.toSecondView = true
                }), secondaryButton: .default(Text("いいえ")))
            }
        }
    }
}

struct SecondView: View {
    var body: some View {
        Text("SecondView")
    }
}

NavigationLink そのものをタップするのではなく、Button をタップして表示された選択肢で「はい」を選択したら、isActive に指定した Bool 変数が true になり画面遷移させるパターンです。

NavigationLink 自体は EmptyView を返す様にしているため表示されていませんが画面遷移は機能します。Buttonタップ、if分などの条件分岐、タイマー等を条件として遷移する場合は EmptyView を返す様にしておきます。

以上、基本的な画面遷移の方法を紹介しました。

関連する記事として以下もご参考ください。

SwiftUIで「戻る」ボタンを使わずにコードで前画面へ戻る方法

SwiftUIで２つ以上前の画面へ戻る方法

SwiftUIで画面遷移する方法【NavigationView と NavigationLink】