セクション 107

子ビューにデータを渡す

LandmarkDetail ビューは、ハードコードされた詳細をまだ使用してそのランドマークを表示しています。LandmarkRow と全く同様に、LandmarkDetail 型とそれを構成するビューは、データのソースとして landmark プロパティを使用する必要があります。

子ビューから始めて、CircleImage、MapView、LandmarkDetail の順に変換して、各行をハードコーディングするのではなく、渡されたデータを表示するようにします。

ステップ 1

CircleImage.swift で、保管されている画像プロパティを CircleImage に追加します。

これは、SwiftUI を使用してビューをビルドする場合の一般的なパターンです。カスタムビューは、特定のビューの一連の修飾子を包み込みカプセル化することがよくあります。

    CircleImage.swift

1. import SwiftUI
3. struct CircleImage: View {
var image: Image
4. var body: some View {
image

ステップ 2

プレビュープロバイダーを更新して、Turtle Rock の画像を渡すようにします。

プレビューロジックをいかに修正しても、ビルドが失敗するため、プレビューは更新されません。円の画像をインスタンス化する詳細ビューには、入力パラメータもまた必要です。

    CircleImage.swift

14. struct CircleImage_Previews: PreviewProvider {
15. static var previews: some View {
CircleImage(image: Image("turtlerock"))
16. }
17. }

ステップ 3

MapView.swift で、coordinate プロパティを MapView に追加し、修正した座標を渡すようにプレビュープロバイダーを更新します。

詳細ビューには新しいパラメータを必要とする map ビューがあるため、この変更はビルドにも影響します。詳細ビューはまもなく修正されます。

    MapView.swift

4. struct MapView: View {
var coordinate: CLLocationCoordinate2D
5. @State private var region = MKCoordinateRegion(
6. center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868),

ステップ 4

座標値に基づいて領域を更新するメソッドを追加します。

    MapView.swift

12. Map(coordinateRegion: $region)
13. }
private func setRegion(_ coordinate: CLLocationCoordinate2D) {
region = MKCoordinateRegion(
center: coordinate,
span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
)
}
14. }
16. struct MapView_Previews: PreviewProvider {

ステップ 5

現在の座標に基づいて領域の計算をトリガーする onAppear ビュー修飾子をマップに追加します。

    MapView.swift

4. struct MapView: View {
5. var coordinate: CLLocationCoordinate2D
@State private var region = MKCoordinateRegion()
7. var body: some View {

ステップ 6

LandmarkDetail.swift で、Landmark プロパティを LandmarkDetail 型に追加します。

    LandmarkDetail.swift

3. struct LandmarkDetail: View {
var landmark: Landmark
5. var body: some View {

ステップ 7

LandmarkList.swift で、現在のランドマークを宛先の LandmarkDetail に渡します。

    LandmarkList.swift

5. NavigationView {
6. List(landmarks) { landmark in
NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
7. LandmarkRow(landmark: landmark)
8. }

ステップ 8

LandmarkDetail ファイルで、必要なデータをカスタム型に渡します。

すべての接続が確立されて、プレビューが再び機能し始めます。

    LandmarkDetail.swift

6. var body: some View {
7. VStack {
MapView(coordinate: landmark.locationCoordinate)
8. .ignoresSafeArea(edges: .top)
9. .frame(height: 300)

ステップ 9

コンテナを VStack から ScrollView に変更して、ユーザが説明的なコンテンツをスクロールできるようにし、不要になったスペーサーを削除します。

    LandmarkDetail.swift

6. var body: some View {
ScrollView {
7. MapView(coordinate: landmark.locationCoordinate)
8. .ignoresSafeArea(edges: .top)

ステップ 10

最後に、navigationTitle(_:) 修飾子を呼び出して、詳細ビューを表示するときにナビゲーションバーにタイトルを付け、 navigationBarTitleDisplayMode(_:) 修飾子を呼び出してタイトルをインラインで表示します。

ナビゲーションの変更は、ビューがナビゲーションスタックの一部である場合にのみ効果があります。

    LandmarkDetail.swift

35. .padding()
36. }
.navigationTitle(landmark.name)
.navigationBarTitleDisplayMode(.inline)
37. }
38. }

ステップ 11

ライブプレビューに切り替えて、リストからナビゲートしたときに詳細ビューに正しいランドマークが表示されることを確認します。