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

前回の記事

iOS App Dev Tutorialsを読んでみた。その7
前回の記事を読んだ後に、この記事をご覧ください。

今回の範囲

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))

• プレビューキャンバスでバリアントコントロールをクリックし、「配色バリアント」を選択します。

• テキストビューの前景色を、テーマのアクセントカラーに設定します。

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を渡します。

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)

今回のコードと出力結果

まとめ

今回は、前回行った編集機能の拡張を行った。

次回　iOS App Dev Tutorialsを読んでみた。その９