SwiftUIでいこう！-List!..3

Listから必要な項目を選び詳細画面へと遷移させる仕組みを考えます。

この動画では必要な名前を選んでその詳細な画面へと画面遷移します。

必要なViewを構成する構造体"struct"は

struct ContentView: View {}
struct ContactRow: View {}
struct DetailView: View {}

データを管理する構造体"struct"は

struct Contact: Identifiable {}

という構成になっています。このデータを管理する構造体と一緒にデータもここで定義しています。大規模なデータになる場合はデータベース、API、JSONなどで管理できそうです。

画面の流れですが、起動すると

ContentView: View {}が立ち上がり、その画面を構成しているContactRow: View {}を読み込み表示します。

ContentView: View {}には"NavigationView"でList"の中に,"NavigationLink"が仕込んであります。

"NavigationLink"で"DetailView: View {}"に遷移することができるようになっています。

ここで表示についてまとめます。起動後に表示できる画面は2つ

ContentView: View {}とDetailView: View {}

ContactRow: View {}についてはContentView: View {}の中で"List"を表示するために使われています。

これで起動させると名前などの一覧が表示され、欲しい情報をクリックすると詳細画面が出てくるようになっています。

そして

ContactRow: View {}とDetailView: View {}

で使われるデータはContact: Identifiable {}から引っ張ってきます。