SwiftUI Tutorials - Building Lists and Navigation - 1

Apple Developer Documentation

ここではjsonファイルのデータを読み込んで表形式で表示させる仕組み、その表のカラム選択するとで詳細画面に遷移するようにしていきます。

ProjectFilesをダウンロードして"StartingPoint"に入っているファイルを使って進めていきます。

材料として、XcodeのprojectのResourcesにはダウンロードしたフォルダよりjsonファイルとAssets.xcassetsフォルダに写真を取り込んでおくことが必要です。

Modelの作成(Landmark.swift,ModelData.swift
)

Landmark.swiftで構造体"Landmark"とModelData.swiftで変数"landmaks"を作ります。

表の中にいれるデータを利用できるようにしていきます。イメージです。

構造体"Landmarks"をテンプレートに変数"landmaks"にjsonファイルのデータを使える形で代入します。

このデータを代入された変数"landmaks"を使うことで表形式で表示できるようにしていきます。

データを取り込む準びができたので、表形式にするときに表示する部品を作っていきます。データとしては表形式なので1行単位での表示となります。

その1行表示するテンプレートとして構造体"LandmarkRow"を作ります。swiftファイルを新しく作ってコードを書いていきます。

Row View作成、カスタマイズ(LandmarkRow.swift)

1行にデータを格納するテンプレート構造体"LandmarkRow"を作ります。

List表示するためにLandmarkListの作成(LandmarkList.swift)

構造体"LandmarkRow"を使い表として表示できるように構造体"LandmarkList"作成します。

Make the List Dynamic(動的にデータを表示)

個別にデータを入れて表示させていましたが、これをデータを自動で読み込んで表に入れていくようにします。

構造体"LandmarkList"にList()を使い"LandmarkRow"に自動で変数"landmaks"に入ったデータを流し込みます。

Landmark.swiftで作った構造体"Landmark"に

struct Landmark: Hashable, Codable, Identifiable {}

"Identifiable"を追加します。

追加前

List(landmarks, id: \.id) { landmark in
           LandmarkRow(landmark: landmark)
       }
     

追加後は" id: \.id"がなくても "landmarks"データを直接扱えるようになりました。

 List(landmarks) { landmark in
           LandmarkRow(landmark: landmark)
       }

Set Up Navigation Between List and Detail

ナビゲーションを付け、詳細画面に遷移できるようにします。

LandmarkDetail.swiftという新しいファイルを作り構造体 "LandmarkDetail"を作ります。

このファイルに以前作った"ContentView"のコードをコピーして"LandmarkDetail"に貼り付けます。そして"ContentView"には"LandmarkList()"とコードを書きます。

これでには"ContentView"に、"LandmarkList()"で書いたデータを使ったリスト形式で表示されるようになります。そして" NavigationLink"で遷移先を指定して ".navigationTitle("Landmarks")"では表にタイトルを付けます。

NavigationView {
           List(landmarks) { landmark in
               NavigationLink(destination: LandmarkDetail()) {
                   LandmarkRow(landmark: landmark)
               }
           }
           .navigationTitle("Landmarks")
       }

これで画面の構成はできました。あとはデータを反映させて行かないといけません。