【Swift】NavigationLinkで画面遷移する

まえがき

この記事はSwift独学者による備忘録です。
万が一誤った記載がある場合は、コメントでご指摘いただけると幸いですm(_ _)m

確認環境

XCode Version 15.4
MacOS Sonoma 14.4.1

Swiftにおける画面遷移について

Swiftの画面遷移には代表的なものが２つあり、そのうちの一つがプッシュ遷移と呼ばれるNavigationLinkを用いた遷移方法です。
プッシュ遷移では、画面が右から左に切り替わります。

もう一つはモーダル遷移といって、画面が下から現れる遷移方法です。
こちらは今回の記事では割愛します。

コード例

今回は画面を３つ用意し、NavigationLinkを使用して遷移するようにしました。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("TOP画面です")
                    .font(.title)
                    .padding()

                // NavigationLinkを使って画面遷移を行う
                NavigationLink(destination: SecondView()) {
                    Text("次の画面へ移動")
                        .padding()
                        .background(Color.green)
                        .foregroundColor(.white)
                        .cornerRadius(10)
                }
            }
            .navigationTitle("TOP画面")
        }
    }
}

struct SecondView: View {
    var body: some View {
        VStack {
            Text("2つ目の画面に遷移しました")
                .font(.title)
                .padding()
        }
        
        NavigationLink(destination: ThirdView()) {
            Text("次の画面へ移動")
                .padding()
                .background(Color.orange)
                .foregroundColor(.white)
                .cornerRadius(10)
        }
    }
}

struct ThirdView: View {
    var body: some View {
        VStack {
            Text("3つ目の画面に遷移しました")
                .font(.title)
                .padding()
        }
        
        NavigationLink(destination: ContentView()) {
            Text("TOPへ戻る")
                .padding()
                .background(Color.pink)
                .foregroundColor(.white)
                .cornerRadius(10)
        }
    }
}

それぞれの画面遷移結果は以下です。

ContentView	SecondView	ThirdView

.navigationTitleについて

.navigationTitleは画面のタイトルとして表示されます。(ContentView参照)

画面遷移すると、左上に表示されるナビゲーションボタン(前画面へ戻るボタン)のテキストとして使用されます。(SecondView参照)

.navigationTitleは設定しないことも可能であり、その場合のナビゲーションボタンのテキストは「Back」となります。(ThirdView参照)

あとがき

簡単にNavigationLinkの使用例をまとめました。
今後も捕捉事項があれば随時更新していきます。