【SwiftUI】Listビューとナビゲーションリンクを組み合わせてリストに画面遷移のリンクを設定する

SwiftUIにおけるリストは、ForEach構造体とListビューを組み合わせて実装されることが多いが、今回はこの方法を使って作られたリストに画面遷移のナビゲーションリンクを設定する方法を紹介する。

遷移先のビューを用意する

まずは遷移先となるビュー（Detail.swift）を用意する。

struct DetailView: View {
    var name: String = "Hello SwiftUI"
    var body: some View {
        Text(name).font(.system(size: 30))
    }
}

このビューはサンプルなので、単純にプロパティの値をテキストビューとして表示するだけのものだ。

リストにナビゲーションリンクを設定

次にListビューとForEach構造体を組み合わせて、ContentView.swiftにリストを作っていく。

リストに表示するTextビューをNavigationLinkで囲むことで画面遷移のリンクを設定することができる。

struct ContentView: View {
    @State var civilizations = ["ポルトガル", "スペイン", "オランダ", "フランス", "日本", "アステカ"]

    var body: some View {
        NavigationView {
            List {
                ForEach(civilizations, id: \.self) { cvlz in
                    NavigationLink(destination: DetailView(name: cvlz)) {
                        Text(cvlz)
                    }
                }
            }
            .navigationBarTitle("Civilization")
            .navigationBarHidden(true)
        }
    }
}

また、遷移先のDetailViewのnameプロパティに、civilizations配列の値を渡すことで、以下のように遷移後のDetailビューで渡した値を利用することができる。

リストをタップすると画面が遷移し、タップした文明の名前が表示される。

ForEach、List、NavigationLinkは、アプリ開発でよく使う組み合わせになると思うので、しっかりと覚えておきたい。