XCode 12.4 日本語化計画：Swift Tutorials

セクション 103

プロファイルエディタの定義




ユーザプロファイルエディタは、主にプロファイルの個々の詳細を変更するさまざまなコントロールで構成されています。バッジなど、プロファイル内の一部の項目は、ユーザが編集できないため、エディタに表示されません。




プロファイルの概要との一貫性を保つために、エディタ内で同じ順序でプロファイルの詳細を追加します。











ステップ 1

ProfileEditor という名前の新しいビューを作成し、ユーザのプロファイルのコピーの下書きへの結束を含めます。




---




ビューの最初のコントロールはTextFieldで、文字列バインディング（この場合は、ユーザーが選択した表示名）を制御および更新します。 テキストフィールドを作成するときに、ラベルと文字列への拘束を指定します。





    ProfileEditor.swift



1. import SwiftUI
3. struct ProfileEditor: View {
4. @Binding var profile: Profile
6. var body: some View {
7. List {
8. HStack {
9. Text("Username").bold()
10. Divider()
11. TextField("Username", text: $profile.username)
12. }
13. }
14. }
15. }
17. struct ProfileEditor_Previews: PreviewProvider {
18. static var previews: some View {
19. ProfileEditor(profile: .constant(.default))
20. }
21. }




プレビュー その 1





ステップ 2

ProfileHost の条件付きコンテンツを更新して、プロファイルエディタを含め、プロファイルの結束を渡します。




---




これで、[Edit(編集)] をタップすると、プロファイルの編集ビューが表示されます。





    ProfileHost.swift



1. import SwiftUI
3. struct ProfileHost: View {
4. @Environment(\.editMode) var editMode
5. @EnvironmentObject var modelData: ModelData
6. @State private var draftProfile = Profile.default
8. var body: some View {
9. VStack(alignment: .leading, spacing: 20) {
10. HStack {
11. Spacer()
12. EditButton()
13. }
15. if editMode?.wrappedValue == .inactive {
16. ProfileSummary(profile: modelData.profile)
17. } else {
ProfileEditor(profile: $draftProfile)
18. }
19. }
20. .padding()
21. }
22. }
24. struct ProfileHost_Previews: PreviewProvider {
25. static var previews: some View {
26. ProfileHost()
27. .environmentObject(ModelData())
28. }
29. }




ステップ 3

ランドマーク関連のイベントに関する通知を受信するためのユーザの設定に対応するトグルスイッチを追加します。




---




トグルスイッチはオンまたはオフのいずれかのコントロールであるため、yes または no の設定値などのブール値に適しています。





    ProfileEditor.swift



11. TextField("Username", text: $profile.username)
12. }
Toggle(isOn: $profile.prefersNotifications) {
Text("Enable Notifications").bold()
}
13. }
14. }




プレビュー その 2




ステップ 4

Picker コントロールとそのラベルを VStack に配置して、ランドマークの写真に選択可能な好みのシーズンを設定できるようにします。





    ProfileEditor.swift



15. Text("Enable Notifications").bold()
16. }
VStack(alignment: .leading, spacing: 20) {
Text("Seasonal Photo").bold()
Picker("Seasonal Photo", selection: $profile.seasonalPhoto) {
ForEach(Profile.Season.allCases) { season in
Text(season.rawValue).tag(season)
}
}
.pickerStyle(SegmentedPickerStyle())
}
17. }
18. }




プレビュー その 3




ステップ 5

最後に、シーズンセレクターの下に DatePicker を追加して、ランドマークの訪問目標の日付を変更できるようにします。





    ProfileEditor.swift



1. import SwiftUI
3. struct ProfileEditor: View {
4. @Binding var profile: Profile
var dateRange: ClosedRange<Date> {
let min = Calendar.current.date(byAdding: .year, value: -1, to: profile.goalDate)!
let max = Calendar.current.date(byAdding: .year, value: 1, to: profile.goalDate)!
return min...max
}
6. var body: some View {
7. List {
8. HStack {
9. Text("Username").bold()
10. Divider()
11. TextField("Username", text: $profile.username)
12. }
14. Toggle(isOn: $profile.prefersNotifications) {
15. Text("Enable Notifications").bold()
16. }
18. VStack(alignment: .leading, spacing: 20) {
19. Text("Seasonal Photo").bold()
21. Picker("Seasonal Photo", selection: $profile.seasonalPhoto) {
22. ForEach(Profile.Season.allCases) { season in
23. Text(season.rawValue).tag(season)
24. }
25. }
26. .pickerStyle(SegmentedPickerStyle())
27. }
DatePicker(selection: $profile.goalDate, in: dateRange, displayedComponents: .date) {
Text("Goal Date").bold()
}
28. }
29. }
30. }
32. struct ProfileEditor_Previews: PreviewProvider {
33. static var previews: some View {
34. ProfileEditor(profile: .constant(.default))
35. }
36. }




プレビュー その 4









セクション 1	セクション 2
セクション 3	セクション 4
セクション 101	セクション 102
セクション 103	セクション 104