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