XCode 12.4 日本語化計画：Swift Tutorials

セクション 5

ビューにモデルオブジェクトを採用する




ModelData オブジェクトを作成したので、ビューを更新して、アプリのデータ保管場所として採用する必要があります。



















ステップ 1

LandmarkList.swift で、@EnvironmentObject プロパティ宣言をビューに追加し、environmentObject(_:) 修飾子をプレビューに追加します。




---




environmentObject(_:) 修飾子が親に適用されている限り、modelData プロパティはその値を自動的に取得します。

































ステップ 2

ランドマークをフィルタリングするときは、modelData.landmarks をデータとして使用しましょう。











ステップ 3

LandmarkDetail ビューを更新して、環境 (environment) 内の ModelData オブジェクトを操作します。






















































ステップ 4

LandmarkRow プレビューを更新して、 ModelData オブジェクトで機能するようにします。






























ステップ 5

ContentView プレビューを更新して、モデルオブジェクトを環境 (environment) に追加します。これにより、オブジェクトをすべてのサブビューで使用できるようになります。




---




サブビューに環境 (environment) 内のモデルオブジェクトが必要な場合、プレビューは失敗しますが、プレビューをしているビューには environmentObject(_:) 修飾子がありません。






次に、アプリインスタンスを更新して、シミュレータまたはデバイス上でアプリを実行するときにモデルオブジェクトを環境 (environment) に配置します。




ステップ 6

LandmarksApp を更新してモデルインスタンスを作成し、environmentObject(_:) 修飾子を使用して ContentView に提供します。




---




@StateObject 属性を使用して、アプリの寿命中に 1 回だけ与えられたプロパティのモデルオブジェクトを初期化します。これは、ここに示すように、アプリインスタンスで属性を使用する場合、およびビューで使用する場合に当てはまります。





ステップ 7

LandmarkList.swift に戻り、ライブプレビューをオンにして、すべてが正しく機能していることを確認して下さい。

    LandmarkList.swift

1. import SwiftUI
3. struct LandmarkList: View {
@EnvironmentObject var modelData: ModelData
@State private var showFavoritesOnly = false
5. var filteredLandmarks: [Landmark] {
6. landmarks.filter { landmark in
7. (!showFavoritesOnly || landmark.isFavorite)
8. }
9. }
11. var body: some View {
12. NavigationView {
13. List {
14. Toggle(isOn: $showFavoritesOnly) {
15. Text("Favorites only")
16. }
18. ForEach(filteredLandmarks) { landmark in
19. NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
20. LandmarkRow(landmark: landmark)
21. }
22. }
23. }
24. .navigationTitle("Landmarks")
25. }
26. }
27. }
29. struct LandmarkList_Previews: PreviewProvider {
30. static var previews: some View {
31. LandmarkList()
.environmentObject(ModelData())
32. }
33. }

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

7. var filteredLandmarks: [Landmark] {
modelData.landmarks.filter { landmark in
8. (!showFavoritesOnly || landmark.isFavorite)

    LandmarkDetail.swift

1. import SwiftUI
3. struct LandmarkDetail: View {
4. var landmark: Landmark
6. var body: some View {
7. ScrollView {
8. MapView(coordinate: landmark.locationCoordinate)
9. .ignoresSafeArea(edges: .top)
10. .frame(height: 300)
12. CircleImage(image: landmark.image)
13. .offset(y: -130)
14. .padding(.bottom, -130)
16. VStack(alignment: .leading) {
17. Text(landmark.name)
18. .font(.title)
19. .foregroundColor(.primary)
21. HStack {
22. Text(landmark.park)
23. Spacer()
24. Text(landmark.state)
25. }
26. .font(.subheadline)
27. .foregroundColor(.secondary)
29. Divider()
31. Text("About \(landmark.name)")
32. .font(.title2)
33. Text(landmark.description)
34. }
35. .padding()
36. }
37. .navigationTitle(landmark.name)
38. .navigationBarTitleDisplayMode(.inline)
39. }
40. }
42. struct LandmarkDetail_Previews: PreviewProvider {
43. static var previews: some View {
LandmarkDetail(landmark: ModelData().landmarks[0])
44. }
45. }

    LandmarkRow.swift

1. import SwiftUI
3. struct LandmarkRow: View {
4. var landmark: Landmark
6. var body: some View {
7. HStack {
8. landmark.image
9. .resizable()
10. .frame(width: 50, height: 50)
11. .cornerRadius(5)
12. Text(landmark.name)
14. Spacer()
16. if landmark.isFavorite {
17. Image(systemName: "star.fill")
18. .imageScale(.medium)
19. .foregroundColor(.yellow)
20. }
21. }
22. }
23. }
25. struct LandmarkRow_Previews: PreviewProvider {
static var landmarks = ModelData().landmarks
27. static var previews: some View {
28. Group {
29. LandmarkRow(landmark: landmarks[0])
30. LandmarkRow(landmark: landmarks[1])
31. }
32. .previewLayout(.fixed(width: 300, height: 70))
33. }
34. }

    ContentView.swift

1. import SwiftUI
3. struct ContentView: View {
4. var body: some View {
5. LandmarkList()
6. }
7. }
9. struct ContentView_Previews: PreviewProvider {
10. static var previews: some View {
11. ContentView()
.environmentObject(ModelData())
12. }
13. }

    LandmarksApp.swift

1. import SwiftUI
3. @main
4. struct LandmarksApp: App {
@StateObject private var modelData = ModelData()
6. var body: some Scene {
7. WindowGroup {
8. ContentView()
.environmentObject(modelData)
9. }
10. }
11. }