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