SwiftUI の @State, @ObservedObject, @EnvironmentObject

potatotips #66 (iOS/Android開発Tips共有会) - connpass
https://potatotips.connpass.com/event/149806/

11/11 23:07 ObservedObject の説明を加筆しました

Transcript

1. SwiftUI ͷ @State, @ObservedObject, @EnvironentObject 2019/11/11 potatotips #66 twitter.com/kumamo_tone
2. • iOS/AndroidΤϯδχΞˏϠϑʔ • ษڧձӡӦ • Bonfire iOSɺWWDC Extended ͳͲ • ࠷ۙࣾ಺༻ͷΞϓϦΛSwiftUIͰ࡞Γ·ͨ͠ ۽ຊ ࿨ਖ਼ (@kumamo_tone)
3. SwiftUI iOS13Ͱొ৔ͨ͋ͨ͠Β͍͠ϑϨʔϜϫʔΫ એݴతʹUIΛهड़Ͱ͖Δ
5. struct ContentView: View { @State var isOn: Bool var body: some View { Toggle(isOn: $isOn) { if self.isOn { Text("On") } else { Text("Off") } }.frame(width: 200) } } #PPMܕͷ
   ϓϩύςΟ
6. struct ContentView: View { @State var isOn: Bool var body: some View { Toggle(isOn: $isOn) { if self.isOn { Text("On") } else { Text("Off") } }.frame(width: 200) } } #PPMܕͷ
   ϓϩύςΟ 7JFX
   Λએݴ
   #PPMͷঢ়ଶ͕มΘΔͱɺ
   উखʹมΘΔ
7. struct ContentView: View { @State var isOn: Bool var body: some View { Toggle(isOn: $isOn) { if self.isOn { Text("On") } else { Text("Off") } }.frame(width: 200) } } #PPMܕͷ
   ϓϩύςΟ 7JFX
   Λએݴ
   #PPMͷঢ়ଶ͕มΘΔͱɺ
   উखʹมΘΔ !4UBUF͕͍͍ͭͯΕ͹
8. • @State • @ObservedObject • @EnvironentObject View Binding༻ͷProperty Wrappers Property Wrappersʹ͍ͭͯͷ ͘Θ͍͠આ໌͸ɺҎલεϥΠυʹ·ͱΊͨͷͰ Α͔ͬͨΒࢀߟʹ͍ͯͩ͘͠͞
9. @State
10. @State • ͍ͪ͹ΜجຊతͳόΠϯσΟϯάํ๏
11. struct ContentView: View { @State var isOn: Bool var body: some View { Toggle(isOn: $isOn) { if self.isOn { Text("On") } else { Text("Off") } }.frame(width: 200) } } ͜ͷϓϩύςΟ
    ͷมߋ͕
    ݕ஌Ͱ͖ΔΑ͏ʹͳΔ
12. @State ͷಛ௃ • ੍ݶ • એݴͨ͠ViewͱͦͷࢠViewͰ͔͔ͭ͑͠ͳ͍ • Viewʹؔ܎͕͋ΔʢͰ͖Ε͹ʣprivateͳϓϩύςΟʹ͔ͭ͏ • Toggleͷঢ়ଶ • TabViewͷબ୒ঢ়ଶ, • ButtonͷisEnabledɹͳͲ
13. @ObservedObject
14. • ࣗ࡞Ϋϥεͷঢ়ଶΛόΠϯσΟϯά͢Δ͜ͱ͕Ͱ͖Δ @ObservedObject
15. struct ContentView: View { @State var userFirstName: String @State var userLastName: String }
16. struct ContentView: View { @State var user: User } struct ContentView: View { @State var userFirstName: String @State var userLastName: String } ʢTUSVDUʹͨ͠৔߹ʣ
    ϓϩύςΟͷมߋ͕͋Δͱɺ
    શମΛஔ͖׵͑Δඞཁ͕
    ͋ΔͨΊɺDMBTTʹ͍ͨ͠
    ͱ͖͕͋Δ
17. struct ContentView: View { @State var user: User } struct ContentView: View { @State var userFirstName: String @State var userLastName: String } ʢDMBTTʹͨ͠৔߹ʣ
    VTFSͷมߋ͸ݕ஌Ͱ͖Δ͕ɺ
    VTFSpSTU/BNF
    ͷมߋ͸ݕ஌Ͱ͖ͳ͍
18. struct ContentView: View { @ObservedObject var user: User } struct ContentView: View { @State var userFirstName: String @State var userLastName: String }
19. class User: ObservableObject { @Published var userFirstName: String @Published var userLastName: String } ద߹͢Δͱ
    !0CTFSWFE0CKFDU
    
    ͱͯ͠࢖͑Δ
20. class User: ObservableObject { @Published var userFirstName: String @Published var userLastName: String } ద߹͢Δͱ
    !0CTFSWFE0CKFDU
    ͱͯ͠࢖͑Δ !1VCMJTIFE
    Λ͚ͭΔͱ
    มߋΛݕ஌Ͱ͖ΔΑ͏ʹͳΔ
21. • ࢖͍Ͳ͜Ζ • Viewʹؔ͢ΔclassʢViewModelͳͲʣΛͻͱ·ͱΊʹ͍ͨ͠ͱ͖ @ObservedObject ͷಛ௃
22. @EnvironmentObject
24. class GameSettings: ObservableObject { @Published var isHard: Bool = false }
25. struct ContentView: View { @ObservedObject var settings: GameSettings = GameSettings() var body: some View { NavigationView { List { NavigationLink(destination: NextView(settings: self.settings)) { Text("\(settings.isHard ? "Hard" : "Easy")") }}}}} struct NextView: View { @ObservedObject var settings: GameSettings var body: some View { Toggle(isOn: $settings.isHard) { self.settings.isHard ? Text("Hard") : Text("Easy") }}} ભҠઌͷ7JFXΛ
 ࢦఆ
26. struct ContentView: View { @ObservedObject var settings: GameSettings = GameSettings() var body: some View { NavigationView { List { NavigationLink(destination: NextView(settings: self.settings)) { Text("\(settings.isHard ? "Hard" : "Easy")") }}}}} struct NextView: View { @ObservedObject var settings: GameSettings var body: some View { Toggle(isOn: $settings.isHard) { self.settings.isHard ? Text("Hard") : Text("Easy") }}} ΠχγϟϥΠβʹ
    ౉͢
27. UIHostingController( rootView: ContentView() .environmentObject(GameSettings()) ) &OWJSPONFOUʹొ࿥
28. • EnvironmentʢViewؒͰڞ༗͢ΔγϯάϧτϯͷΑ͏ͳ΋ͷʣ
 ʹొ࿥͞Ε͍ͯΔ৘ใΛऔΓग़͢ @EnvironmentObject
29. struct ContentView: View { @ObservedObject var settings: GameSettings = GameSettings() var body: some View { NavigationView { List { NavigationLink(destination: NextView(settings: self.settings)) { Text("\(settings.isHard ? "Hard" : "Easy")") }}}}} struct NextView: View { @ObservedObject var settings: GameSettings var body: some View { Toggle(isOn: $settings.isHard) { self.settings.isHard ? Text("Hard") : Text("Easy") }}}
30. struct ContentView: View { @EnvironmentObject var settings: GameSettings var body: some View { NavigationView { List { NavigationLink(destination: NextView()) { Text("\(settings.isHard ? "Hard" : "Easy")") }}}}} struct NextView: View { @EnvironmentObject var settings: GameSettings var body: some View { Toggle(isOn: $settings.isHard) { self.settings.isHard ? Text("Hard") : Text("Easy") }}} Կ΋౉͞ͳͯ͘Α͍
31. • ࢖͍Ͳ͜Ζʢओ؍ʣ • ΞϓϦશମͰ࢖͏৘ใͳͲɺ
 ΠχγϟϥΠβͰ౉͍ͯ͘͠ͷ͕ΊΜͲ͍͘͞ͱ͖ @EnvironmentObject ͷಛ௃
32. ·ͱΊ
33. • @State • ϓϩύςΟΛόΠϯσΟϯάͰ͖Δ • @ObservedObject • ࣗ࡞ΫϥεΛόΠϯσΟϯάͰ͖Δ • όΠϯσΟϯά͢ΔPropertyʹ@PublishedΛ͚ͭΔ • @EnvironentObject • ΠχγϟϥΠβܦ༝ͰViewؒͷσʔλͷड͚౉͕͠Ͱ͖Δ • @EnvironentObject Ͱ Environment ܦ༝Ͱ΋ड͚౉͕͠Ͱ͖Δ ·ͱΊ
34. • What's New in Swift • https://developer.apple.com/videos/play/wwdc2019/402/ • SwiftUIͷProperty Wrappersͱσʔλ΁ͷΞΫηεํ๏ • https://qiita.com/shiz/items/6eaf87fa79499623306a References