SwiftUI/PropertyWrapper の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• SwiftUI/PropertyWrapper へ行く。
• SwiftUI/PropertyWrapper の差分を削除

#author("2022-11-16T04:34:52+00:00","default:src128","src128")
#author("2022-11-16T05:15:09+00:00","default:src128","src128")
&tag(SwiftUI/PropertyWrapper);
*目次 [#z8da1a17]
#contents
*関連ページ [#n88c2da1]
*参考情報 [#ua83d4c0]

-[[SwiftUIのデータ管理 Property Wrapper編:https://blog.personal-factory.com/2021/01/23/how-to-use-propertywrapper-in-swiftui/]]


*Property Wrapperの種類 [#l9739a89]
-@State、@Binding、@StateObject、@ObservedObjectなどデータを管理するためのProperty Wrapperがたくさん存在する


** @State [#b535e418]
-データが値型。データの更新あり。データの発生源がVIewの場合に使用。
-ボタンをタップするとその数字が増える。
#pre{{
struct StateSample: View {
    private var counter = 0
    var body: some View {
        Button(action: {
            self.counter += 1
        }, label: {
            Text("counter is \(counter)")
        })
    }
}

}}

** @Binding [#pd81fb92]
-データが値型。データの更新あり。データの発生源は外部。
#pre{{
struct ParentView: View {
    @State private var counter = 0
    var body: some View {
        ChildView(counter: $counter)
            .frame(width: .infinity)
    }
}
struct ChildView: View {
    @Binding var counter: Int
    var body: some View {
        Button(action: {
            counter += 1
        }, label: {
            Text("\(counter)")
                .font(.title)
        })
        .border(Color.red)
    }
}
}}

** @Environment [#j1aa4f77]
-Viewの環境値を読み取れるもの。KeyPathを指定する。
#pre{{
struct EnvironmentSample: View {
    @Environment(\.colorScheme) var colorScheme: ColorScheme
    var body: some View {
        if colorScheme == .dark {
            Text("dark mode")
        } else if colorScheme == .light {
            Text("light mode")
        } else {
            Text("")
        }
    }
}
}}

** ObservableObjectプロトコル [#oc30aca6]
-@StateObject、@ObservedObject、@EnvironmentObjectとして使用するデータオブエクトに実装。
#pre{{
class DataSource: ObservableObject {
  @Published var counter = 0
}
}}

** @StateObject [#g4dfa573]
-データが参照型のデータオブジェクト。データの発生源がVIewの場合に使用。
-iOS 14以降。
#pre{{
struct StateObjectSample: View {
    @StateObject private var dataSource = DataSource()
    var body: some View {
        VStack {
            Button("increment counter") {
                dataSource.counter += 1
            }
            Text("StateObject count： \(dataSource.counter)")
                .font(.title)
        }
    }
}
}}

** @ObservedObject [#w79717f5]
-データが他参照のデータオブジェクト。データの発生源が外部。
#pre{{
fileprivate
struct ParentView: View {
    @StateObject private var dataSource = DataSource()
    var body: some View {
        ChildView(dataSource: dataSource)
    }
}

fileprivate
struct ChildView: View {
    @ObservedObject var dataSource: DataSource
    var body: some View {
        VStack {
            Button("increment counter") {
                dataSource.counter += 1
            }
            Text("count： \(dataSource.counter)")
        }
    }
}
}
}

** @StateObjectと@ObservedObjectの違い
-以下のサンプルを考える。
#pre{{
struct StateObjectCounterView: View {
    @StateObject private var dataSource = DataSource()
    var body: some View {
        VStack {
            Button("increment counter") {
                dataSource.counter += 1
            }
            Text("StateObject count： \(dataSource.counter)")
                .font(.title)
        }
    }
}


struct ObservedObjcetCounterView: View {
    @ObservedObject private var dataSource = DataSource()
    var body: some View {
        VStack {
            Button("increment counter") {
                dataSource.counter += 1
            }
            Text("ObservedObject count： \(dataSource.counter)")
                .font(.title)
        }
    }
}


struct SwitchColorView: View {
    @State private var isDanger: Bool = false
    var body: some View {
        VStack {
            Button("Change the Color") {
                isDanger.toggle()
            }
            if isDanger {
                Circle().foregroundColor(.red)
                    .frame(width: 200, height: 200)
            } else {
                Circle().foregroundColor(.green)
                    .frame(width: 200, height: 200)
            }
            StateObjectCounterView()
            ObservedObjcetCounterView()
            Spacer()
        }
    }
}
}}
-StateObjectとObservedObjectをカウントアップした後、「Change the Color」で色を変更すると、StateObjectのカウントは維持されるが、ObservedObjectはリセットされる。
-@StateObjectはViewを表示してから非表示まで。@ObservedObjectはbodyが更新されるまでのため。
-これを避けるためには、@ObservedObjectには親Viewからわたす。

**@EnvironmentObject [#s5554de0]
-参照型オブジェクトを子ビューでアクセスできるようになる。
#pre{{
fileprivate
struct ParentView: View {
    var body: some View {
        ChildView()
    }
}

fileprivate
struct ChildView: View {
    var body: some View {
        GrandChildView()
    }
}

fileprivate
struct GrandChildView: View {
    @EnvironmentObject var dataSource: DataSource
    var body: some View {
        Text("\(dataSource.counter)")
    }
}

struct EnvironmentObjectSample_Previews: PreviewProvider {
    @StateObject static private var dataSource = DataSource()
    static var previews: some View {
        ParentView().environmentObject(dataSource)
    }
}

}}