SwiftUIではナビゲーションビューを使って画面遷移機能も簡単に実装することができる。

遷移先ビューの用意

今回は遷移先として別のビューを用意することにする。

新規のSwiftUIビューファイル（SecondView.swift）を作成し、適当に以下のようなビューを作る。

1
2
3
4
5
6
7
8
9
struct SecondView: View {
    var body: some View {
        ZStack {
            Rectangle().fill(Color.yellow)
            Text("2nd View").font(.system(size: 20))
        }
        .navigationBarTitle("Second View")
    }
}

NavigationLinkの実装

次は遷移元のビュー（ContentView.swift）にNavigationLinkを使った画面遷移の機能を実装していく。

01
02
03
04
05
06
07
08
09
10
11
struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: SecondView()) {
                Text("次のビューを表示する")
                    .font(.system(size: 20))
            }
            .navigationBarTitle("First View")
        }
    }
}

引数のdestinationには遷移先のビューを指定し、クロージャ内には画面遷移のトリガーとなるビューを指定する。

このアプリを実行すると、まず遷移元となる次のビューが表示される。

NavigationLinkのトリガーとして指定したテキストビューをタップすると、画面が遷移し次のビューが表示される。