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は、アプリ開発でよく使う組み合わせになると思うので、しっかりと覚えておきたい。