XCode 12.4 日本語化計画：Swift Tutorials

セクション 2

編集モードの追加




ユーザは、プロファイルの詳細の表示と編集を切り替える必要があります。EditButton を既存の ProfileHost に追加し、個々の値を編集するためのコントロールを備えたビューを作成することにより、編集モードを追加します。










ステップ 1

ProfileHost を選択し、モデルデータを環境オブジェクトとしてプレビューに追加します。




---




このビューは @EnvironmentObject 属性を持つプロパティを使用しませんが、このビューの子である ProfileSummary は使用します。したがって、修飾子がないと、プレビューは失敗します。












ステップ 2

環境の \.editMode をキーオフする Environment ビュープロパティを追加します。

SwiftUI は、@Environment プロパティラッパーを使用してアクセスできる環境の値の保管場所を提供します。editMode 値にアクセスして、編集のスコープの読み取りまたは書き込みを行います。

ステップ 3

環境の editMode 値のオンとオフを切り替える [Edit(編集)] ボタンを作成します。

EditButton は、以前の手順でアクセスしたものと同じ editMode 環境値を制御します。

ステップ 4

ModelData クラスを更新して、ユーザがプロファイルビューを閉じた後も存続するユーザプロファイルのインスタンスを含めます。

ステップ 5

環境からユーザプロファイルデータを読み取り、データの制御をプロファイルホストに渡します。

ユーザが名前を入力しているときなど、編集を確認する前にグローバルアプリの状態が更新されないようにするために、編集ビューはそれ自体のコピーを操作します。

ステップ 6

静的プロファイルまたは編集モードのビューのいずれかを表示する条件付きビューを追加します。

ライブプレビューを実行して編集ボタンをタップすると、[Edit(編集)] モードに入ったときの効果を確認できます。今のところ、Edit モードビューは単なる静的テキストフィールドです。

    ProfileHost.swift

1. import SwiftUI
3. struct ProfileHost: View {
4. @State private var draftProfile = Profile.default
6. var body: some View {
7. VStack(alignment: .leading, spacing: 20) {
8. ProfileSummary(profile: draftProfile)
9. }
10. .padding()
11. }
12. }
14. struct ProfileHost_Previews: PreviewProvider {
15. static var previews: some View {
16. ProfileHost()
.environmentObject(ModelData())
17. }
18. }

プレビュー その 1

    ProfileHost.swift

1. import SwiftUI
3. struct ProfileHost: View {
@Environment(\.editMode) var editMode
4. @State private var draftProfile = Profile.default
6. var body: some View {

    ProfileHost.swift

7. var body: some View {
8. VStack(alignment: .leading, spacing: 20) {
HStack {
Spacer()
EditButton()
}
9. ProfileSummary(profile: draftProfile)
10. }

プレビュー その 2

    ModelData.swift

1. import Foundation
2. import Combine
4. final class ModelData: ObservableObject {
5. @Published var landmarks: [Landmark] = load("landmarkData.json")
6. var hikes: [Hike] = load("hikeData.json")
@Published var profile = Profile.default
8. var features: [Landmark] {
9. landmarks.filter { $0.isFeatured }
10. }
12. var categories: [String: [Landmark]] {
13. Dictionary(
14. grouping: landmarks,
15. by: { $0.category.rawValue }
16. )
17. }
18. }
20. func load<T: Decodable>(_ filename: String) -> T {
21. let data: Data
23. guard let file = Bundle.main.url(forResource: filename, withExtension: nil)
24. else {
25. fatalError("Couldn't find \(filename) in main bundle.")
26. }
28. do {
29. data = try Data(contentsOf: file)
30. } catch {
31. fatalError("Couldn't load \(filename) from main bundle:\n\(error)")
32. }
34. do {
35. let decoder = JSONDecoder()
36. return try decoder.decode(T.self, from: data)
37. } catch {
38. fatalError("Couldn't parse \(filename) as \(T.self):\n\(error)")
39. }
40. }

    ProfileHost.swift

1. import SwiftUI
3. struct ProfileHost: View {
4. @Environment(\.editMode) var editMode
@EnvironmentObject var modelData: ModelData
5. @State private var draftProfile = Profile.default
7. var body: some View {
8. VStack(alignment: .leading, spacing: 20) {
9. HStack {
10. Spacer()
11. EditButton()
12. }
ProfileSummary(profile: modelData.profile)
14. }
15. .padding()
16. }
17. }
19. struct ProfileHost_Previews: PreviewProvider {
20. static var previews: some View {
21. ProfileHost()
22. .environmentObject(ModelData())
23. }
24. }

プレビュー その 3

    ProfileHost.swift

12. EditButton()
13. }
if editMode?.wrappedValue == .inactive {
ProfileSummary(profile: modelData.profile)
} else {
Text("Profile Editor")
}
15. }
16. .padding()
17. }