見出し画像

SwiftUI Tutorials - Building Lists and Navigation - 2

Pass Data into Child Views

次に詳細画面"LandmarkDetail()"のデータを表のデータ(jsonデータ)を利用して更新できるようにしていきます。

CircleImage.swift

構造体"CircleImage"に変数

var image: Image

を追加します。

MapView.swift

構造体"MapView"に変数

 var coordinate: CLLocationCoordinate2D

を追加します。そして"region"にいれるデータをMap()で取得できるように

private func setRegion(_ coordinate: CLLocationCoordinate2D) {
       region = MKCoordinateRegion(
           center: coordinate,
           span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
       )
   }

関数を作り、

Map(coordinateRegion: $region)
           .onAppear {
               setRegion(coordinate)
           }

として"Map()"で位置情報をセットします。

次に

LandmarkDetail.swift

の構造体"LandmarkDetail"でデータを取得できるように変数"var landmark: Landmark"を作ってデータに何を入れるか指定していきます。

あとナビゲーション関係、表題の追加です

.navigationTitle(landmark.name)
.navigationBarTitleDisplayMode(.inline)

これでLandmarkDetail()にデータを渡してそれぞれのデータが入り、そのデータにより表示が変わります。テンプレートして機能することができるようになります。

Jsonで記述されたデータをを"LandmarkList"を使い表に落とし込み、"LandmarkDetail"で詳細画面 を作っていきます。基本的な画面ができました。

"LandmarkList"表示するのに特化するContentViewで表示させると表示部分とデータ部分を分けてわかりやすいコード体型としています。

Generate Previews Dynamically

最後にはいろんな機種によるプレビューをする方法が紹介されています。

この記事が気に入ったらサポートをしてみませんか?