前回Navigationの1画面目としてFirstViewという自作Viewを追加しました。今回は2画面目を追加し、1画面目から遷移するプログラムを紹介します。NavigationStack内の遷移には NavigationLink を利用します。

  • 前回のコードに続けて書く

  • 新しい画面用のswiftファイルを追加する

    • ファイルリストで右クリック, New Fileを選択して新しいファイルを作る
    • File.swiftを SecondView.swift に変更する

ファイルの追加

swiftui_2_1_3_1.png

  • SecondView.swift を開く
    • 作り方はFirstViewと同じ。TextとImageを追加する

コード1

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

import SwiftUI

struct SecondView: View {
    var body: some View {
        VStack {
            Text( "Secondページです" )
            .padding()
            
            Image( systemName: "globe" )
            .padding()
        }
    }
}

SecondViewができあがったら ContentView を開き、画面を遷移する処理を書きます。

  • 画面下側に NavigationLink を追加する
  • NavigationLinkの処理ブロック内に遷移する画面の内容を記述
    • SecondView
    • NavigationLink( テキスト, distination: { 次の画面 } )

みやすくするために .frame( maxWidth:.infinity, maxHeight:.infinity ) も追加しています。この記述をするとViewを画面内でできる限り大きくできます。またFirstViewとSecondViewの移動がわかりやすいように背景色も付与しました。

コード2

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                FirstView()
                .navigationTitle( "Firstビュー" )
                .frame( maxWidth: .infinity, maxHeight: .infinity )
                .background( .mint )
                
                NavigationLink( "次のページへ" ) {
                    SecondView()
                    .navigationTitle( "Secondビュー" )
                    .frame( maxWidth: .infinity, maxHeight: .infinity )
                    .background( .yellow )
                }
            }
        }
    }
}

結果

起動時の画面

swiftui_2_1_3_2.png

「次のページへ」を押した後

swiftui_2_1_3_3.png

NavigationStackの中にNavigationLinkを作ると、NavigationStack内に表示するViewを差し替えることができます。記述は簡単で、NavigationLinkの { … } ブロックの中に、表示したい次のViewを記述すればOKです。今回はSecondViewへ差し替えを行いました。

またNavigationLinkを使うと、一つ前のViewに戻るボタンが画面左上に表示されます。特に記述しなくても前の画面に戻ることができます。