XCode 12.4 日本語化計画：Swift Tutorials

セクション 7

子ビューにデータを渡す




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




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









ステップ 1

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




---




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








ステップ 2

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




---




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






ステップ 3

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




---




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



















ステップ 4

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















ステップ 5

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















ステップ 6

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















































ステップ 7

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



























ステップ 8

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




---




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












































ステップ 9

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






























ステップ 10

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




---




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





ステップ 11

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

    CircleImage.swift

1. import SwiftUI
3. struct CircleImage: View {
var image: Image
4. var body: some View {
image
5. .clipShape(Circle())
6. .overlay(Circle().stroke(Color.white, lineWidth: 4))
7. .shadow(radius: 7)
8. }
9. }
11. struct CircleImage_Previews: PreviewProvider {
12. static var previews: some View {
13. CircleImage()
14. }
15. }

上記のリストの 16 行目を以下のように書き足します。

CircleImage(image: Image("turtlerock"))

    MapView.swift

1. import SwiftUI
2. import MapKit
4. struct MapView: View {
var coordinate: CLLocationCoordinate2D
5. @State private var region = MKCoordinateRegion()
6. center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868),
7. span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
8. )
10. var body: some View {
11. Map(coordinateRegion: $region)
12. }
13. }
15. struct MapView_Previews: PreviewProvider {
16. static var previews: some View {
MapView(coordinate: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868))
17. }
18. }

上記のリストの 14 行目に、以下のように書き足します。

private func setRegion(_ coordinate: CLLocationCoordinate2D) {
region = MKCoordinateRegion(
center: coordinate,
span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
)
}
15. }
17. struct MapView_Previews: PreviewProvider {

上記のリストの 6 行目から 12 行目を以下のように書き換えます。

@State private var region = MKCoordinateRegion()
7. var body: some View {
8. Map(coordinateRegion: $region)
.onAppear {
setRegion(coordinate)
}

    LandmarkDetail.swift

1. import SwiftUI
3. struct LandmarkDetail: View {
var landmark: Landmark
5. var body: some View {
6. VStack {
7. MapView()
8. .ignoresSafeArea(edges: .top)
9. .frame(height: 300)
11. CircleImage()
12. .offset(y: -130)
13. .padding(.bottom, -130)
15. VStack(alignment: .leading) {
16. Text("Turtle Rock")
17. .font(.title)
18. .foregroundColor(.primary)
20. HStack {
21. Text("Joshua Tree National Park")
22. Spacer()
23. Text("California")
24. }
25. .font(.subheadline)
26. .foregroundColor(.secondary)
28. Divider()
30. Text("About Turtle Rock")
31. .font(.title2)
32. Text("Descriptive text goes here.")
33. }
34. .padding()
36. Spacer()
37. }
38. }
39. }
41. struct LandmarkDetail_Previews: PreviewProvider {
42. static var previews: some View {
LandmarkDetail(landmark: landmarks[0])
43. }
44. }

    LandmarkList.swift

1. import SwiftUI
3. struct LandmarkList: View {
4. var body: some View {
5. NavigationView {
6. List(landmarks) { landmark in
NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
7. LandmarkRow(landmark: landmark)
8. }
9. }
10. .navigationTitle("Landmarks")
11. }
12. }
13. }
15. struct LandmarkList_Previews: PreviewProvider {
16. static var previews: some View {
17. LandmarkList()
18. }
19. }

上記の LandmarkDetail.swif のリストで 8、12、17、22、24、31、33 行目をそれぞれ以下のように書き換えます。

    LandmarkDetail.swift

MapView(coordinate: landmark.locationCoordinate)

CircleImage(image: landmark.image)

Text(landmark.name)

Text(landmark.park)

Text(landmark.state)

Text("About \(landmark.name)")



Text(landmark.description)









さらに 7 行目を以下のように書き換え、37 行目を削除します。




ScrollView {



Spacer()
↓
////削除/////





今削除した 36~37 行目に、以下のように書き足します。




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










セクション 1	セクション 2	セクション 3	セクション 4
セクション 5	セクション 6	セクション 7	セクション 8
セクション 101	セクション 102	セクション 103	セクション 104
セクション 105	セクション 106	セクション 107	セクション 108