NavigationStack ― 画面を移動する

導入

一覧をタップして詳細へ。アプリの「奥へ進む」動きを担うのが NavigationStack と NavigationLink です。上部のタイトルバーもここで付きます。

説明

一覧全体を NavigationStack { ... } で包み、.navigationTitle("...") で画面のタイトルを付けます。行を NavigationLink にすると、タップで次の画面へ進めます。

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List {
                NavigationLink("プロフィール") {
                    Text("プロフィール画面")
                }
                NavigationLink("通知設定") {
                    Text("通知設定画面")
                }
                NavigationLink("ヘルプ") {
                    Text("ヘルプ画面")
                }
            }
            .navigationTitle("設定")
        }
    }
}

• NavigationStack { ... } … 画面移動の入れ物。
• .navigationTitle("設定") … 上部に表示される大きなタイトル。
• NavigationLink("ラベル") { 移動先のView } … タップで { } の中の画面へ進む。行の右端に「›」が付きます。

実機やシミュレータでは、タップすると横からスッと詳細画面が現れ、左上の「‹ 戻る」で戻れます。この積み重ね（スタック）で、アプリの画面遷移を組み立てます。

やってみよう

.navigationTitle のタイトルを変えて、上部の見出しが変わるのを確かめましょう。NavigationLink の行を足して、メニューを増やしてみてください。

演習

.navigationTitle を「マイページ」に変えて表示してください。