iOS App Dev Tutorialsを読んで実際にやってみた。その8

## 前回の記事
[iOS App Dev Tutorialsを読んでみた。その7](https://qiita.com/shomiya181210/items/48c46d63cc55bec11453)
前回の記事を読んだ後に、この記事をご覧ください。
## 今回の範囲
[Passing data with bindings(バインディングでデータを受け渡す)](https://developer.apple.com/tutorials/app-dev-training/passing-data-with-bindings)
8回目は、前回行った編集機能を拡張します。
## 内容の要約
### 1.テーマビューを追加する。
- ViewsグループにThemeView.swiftという名前の新しいSwiftUI Viewファイルを作成します。
```ThemeView.swift
import SwiftUI

struct ThemeView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

struct ThemeView_Previews: PreviewProvider {
    static var previews: some View {
        ThemeView()
    }
}
```
- テーマ定数を作成し、プレビューで値を渡します。
```ThemeView.swift
let theme: Theme
```
```ThemeView.swift
ThemeView(theme: .buttercup)
```
- テキストビューのテキストをテーマ名に置き換えて、背景をテーマのメインカラーに設定します。

```ThemeView.swift
Text(theme.name)
    .background(theme.mainColor)
```
- テキストビューの幅を親ビューの幅にし、ビューの形状を丸みを帯びた長方形にクリップします。
```ThemeView.swift
.frame(maxWidth: .infinity)
            .background(theme.mainColor)
            .clipShape(RoundedRectangle(cornerRadius: 4))
```
- プレビューキャンバスでバリアントコントロールをクリックし、「配色バリアント」を選択します。
<img width="400" alt="![![スクリーンショット 2023-05-11 21.06.15.png]" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2918800/0c4fb044-123f-2bdc-b63b-a931ab95ac0c.png">

- テキストビューの前景色を、テーマのアクセントカラーに設定します。
```ThemeView.swift
.foregroundColor(theme.accentColor)
```
- ラベルに4というパディングを追加します。
```ThemeView.swift
.padding(4)
```
### 2.テーマピッカーの追加。
- ViewsグループにThemePicker.swiftという名前の新しいSwiftUI Viewファイルを作成します。
- selectionという名前のテーマへのバインディングを作成します。
```ThemeView.swift
@Binding var selection: Theme
```
プレビューのテーマピッカーを初期化するための定数バインディングを渡します。
```ThemeView.swift
ThemePicker(selection: .constant(.periwinkle))
```
- ビューのボディをタイトル「テーマ」のピッカーに置き換え、選択バインディングを渡します。
```ThemeView.swift
Picker("Theme", selection: $selection) {
    
}
```
- Theme.swiftで、テーマ名をidとして、CaseIterableとIdentifiableへの適合させます。
```ThemeView.swift
enum Theme: String, CaseIterable, Identifiable {
```
```ThemeView.swift
var id: String {
    name
}
```
ThemePicker.swiftに、Themeの全ケースをリストアップするためにForEachを追加する。
```ThemeView.swift
ForEach(Theme.allCases) { theme in
    
}
```
ThemeViewを追加し、テーマでタグ付けします。
```ThemeView.swift
ThemeView(theme: theme)
    .tag(theme)
```
- ナビゲーションスタイルを使用させるために、ピッカービューを修正します。
```ThemeView.swift
.pickerStyle(.navigationLink)
```
- DetailEditView.swiftに、テーマを選択するためのピッカービューを追加し、選択されたテーマをバインディングで渡します。
```DetailEditView.swift 
ThemePicker(selection: $scrum.theme)
```
### 3.データへのバインディングをエディットビューに渡す方法。
- DetailEditView.swiftで、スクラムプロパティを状態からバインディングに変更します。
```DetailEditView.swift
@Binding var scrum: DailyScrum
```
- ファイルの最後にあるDetailEditViewのPreviewsセクション内のDetailEditViewイニシャライザーに定数バインディングを渡します。
```DetailEditView.swift
DetailEditView(scrum: .constant(DailyScrum.sampleData[0]))
```
- DetailView.swiftに、editingScrumという名前のprivate @Stateプロパティを追加します。
```DetailEditView.swift
@State private var editingScrum = DailyScrum.emptyScrum
```
- 編集ボタンのアクションクロージャーで、editingScrumにスクラム値を代入する。
```DetailEditView.swift
editingScrum = scrum
```
- ファイルの先頭のスクラム定数を変数バインディングに変更します。
```DetailEditView.swift
@Binding var scrum: DailyScrum
```
ファイルの一番下、DetailView　PreviewsのDetailViewイニシャライザに定数バインディングを渡します。
```DetailEditView.swift
DetailView(scrum: .constant(DailyScrum.sampleData[0]))
```
### 4.バインディングを詳細ビューに渡す
- ScrumsView.swiftで、scrums定数をバインディングに変換します。
```ScrumsView.swift
@Binding var scrums: [DailyScrum]
```
- ScrumsView Previewsで、ScrumsViewのイニシャライザーに定数バインディングを渡します。
```ScrumsView.swift
ScrumsView(scrums: .constant(DailyScrum.sampleData))
```
- スクラムの配列へのバインディングを含むように、リストビューのイニシャライザを更新します。
```ScrumsView.swift
List($scrums) { scrum in
```
DetailViewのイニシャライザーにBinding<DailyScrum>を渡します。
```ScrumsView.swift
NavigationLink(destination: DetailView(scrum: $scrum)) {
```
### 5.リストビューにバインディングを渡す。
- ScrumdingerApp.swiftで、scrumsという名前のprivate @Stateプロパティを追加する。
```ScrumdingerApp.swift
 @State private var scrums = DailyScrum.sampleData
```
- ScrumsViewのイニシャライザーにscrumsへのバインディングを渡します。
```ScrumdingerApp.swift
ScrumsView(scrums: $scrums)
```
#### 今回のコードと出力結果
<img width="600" alt="![スクリーンショット 2023-05-14 17.29.38.png]
" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2918800/c0dc86c3-9acc-7759-f63a-0d53461f9f1a.png">
<img width="600" alt="![スクリーンショット 2023-05-14 17.30.12.png]
" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2918800/8d8b5b04-4e96-4126-2b46-fb91801082ad.png">
<img width="600" alt="![スクリーンショット 2023-05-14 17.34.07.png](
" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2918800/d6fbb535-ef40-149a-8d32-92acdf24e65d.png">
### まとめ
今回は、前回行った編集機能の拡張を行った。

#### [次回　iOS App Dev Tutorialsを読んでみた。その９](https://qiita.com/shomiya181210/items/c27e2d5a77047ae2732f)