【SwiftUI】NavigationStackの使い方を解説

2023年12月3日2023年12月30日

記事内に商品プロモーションが含まれる場合があります

NavigationStackビューは画面遷移やナビゲーションを管理するための便利な機能です。

iOS16から使えるようになったビューで、それまではNavigationViewが使われていました。

NavigationViewはiOS16から非推奨となっています。

NavigationStackの使い方

NavigationStack {
  View1
  View2
  ・・・
}

NavigationStack内で複数のViewを持つことができ、書かれたViewがナビゲーションの管理対象となります。

画面遷移のリンクを追加する

NavigationView内で、NavigationLinkを使用して画面遷移を設定します。

NavigationStack {
    // 画面遷移リンクの定義
    NavigationLink {
        // 遷移先のビュー
        SecondView()
    } label: {
        // リンクボタンのテキスト
        Text("次の画面へ")
                .font(.title)
    }
}

これにより「次の画面へ」というラベルが表示され、タップするとSecondViewに遷移します。

struct ContentView: View {
    var body: some View {
        NavigationStack {
            // 画面遷移リンクの定義
            NavigationLink {
                // 遷移先のView
                SecondView()
            } label: {
                // リンクのラベルとして表示されるテキスト
                Text("次の画面へ")
                    .font(.title)
            }
        }
    }
}

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

タイトルを追加する

ナビゲーションのタイトルを追加するにはnavigationTitleモディファイアを使います。

.navigationTitle("タイトル")

このモディファイは、NavigationStackにつけるのではなく、ナビゲーション配下のViewにつけます。

struct ContentView: View {
    var body: some View {
        NavigationStack {
            // 画面遷移リンクの定義
            NavigationLink {
                // 遷移先のView
                SecondView()
            } label: {
                // リンクのラベルとして表示されるテキスト
                Text("次の画面へ")
                    .font(.title)
            }
            .navigationTitle("First View")  // ナビゲーションタイトル
        }
    }
}

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

タイトルの表示モードを指定する

.navigationBarTitleDisplayMode(表示モード)

タイトルの表示モードを制御するためのモディファイアです。

タイトルがどのように表示されるかを指定できます。

表示モード	意味
.large	大きなタイトルが表示されます。
.inline	小さなタイトルが表示されます。
.automatic	前のナビゲーション項目から表示モードを継承します。