NavigationStack の基本構造

NavigationStack は iOS 16 で導入された画面遷移を管理するコンテナです。従来の NavigationView を置き換えるもので、より柔軟なナビゲーション制御が可能になりました。

NavigationStack の基本

NavigationStack でビューを囲むことで、ナビゲーションバーが表示され、画面遷移が可能になります。

struct ContentView: View {
    var body: some View {
        NavigationStack {
            Text("ホーム画面")
                .navigationTitle("ホーム")
        }
    }
}

navigationTitle でナビゲーションバーのタイトルを設定します。

NavigationLink で画面遷移

NavigationLink をタップすると、指定した遷移先に移動します。

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List {
                NavigationLink("設定") {
                    SettingsView()
                }
                NavigationLink("プロフィール") {
                    ProfileView()
                }
            }
            .navigationTitle("メニュー")
        }
    }
}

struct SettingsView: View {
    var body: some View {
        Text("設定画面")
            .navigationTitle("設定")
    }
}

struct ProfileView: View {
    var body: some View {
        Text("プロフィール画面")
            .navigationTitle("プロフィール")
    }
}

遷移先のビューでも navigationTitle を設定すると、自動的にタイトルと戻るボタンが表示されます。

NavigationLink のラベルをカスタマイズ

NavigationLink のラベルには任意のビューを指定できます。

NavigationLink {
    DetailView()
} label: {
    HStack {
        Image(systemName: "star.fill")
            .foregroundColor(.yellow)
        Text("お気に入り")
        Spacer()
        Text("3件")
            .foregroundColor(.gray)
    }
}

List との組み合わせ

NavigationStack と List を組み合わせることで、マスター・ディテール形式の UI を構築できます。

struct Item: Identifiable {
    let id = UUID()
    var name: String
}

struct ContentView: View {
    let items = [
        Item(name: "りんご"),
        Item(name: "みかん"),
        Item(name: "バナナ")
    ]
    
    var body: some View {
        NavigationStack {
            List(items) { item in
                NavigationLink(item.name) {
                    Text("\(item.name)の詳細")
                        .navigationTitle(item.name)
                }
            }
            .navigationTitle("フルーツ")
        }
    }
}

NavigationStack

ナビゲーション全体を管理するコンテナ。最上位に1つだけ配置する。

NavigationLink

タップで画面遷移を行うコンポーネント。遷移先のビューを指定する。

navigationTitle

ナビゲーションバーに表示するタイトルを設定する。各画面で指定する。

NavigationStack は SwiftUI アプリの基本的な構造となるコンポーネントです。次の記事では NavigationLink の詳細な使い方を解説します。