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
   

   View Slide

2. • iOS/AndroidΤϯδχΞˏϠϑʔ
   • ษڧձӡӦ
   • Bonfire iOSɺWWDC Extended ͳͲ
   • ࠷ۙࣾ಺༻ͷΞϓϦΛSwiftUIͰ࡞Γ·ͨ͠
   ۽ຊ ࿨ਖ਼ (@kumamo_tone)
   

   View Slide

3. SwiftUI
   iOS13Ͱొ৔ͨ͋ͨ͠Β͍͠ϑϨʔϜϫʔΫ
   એݴతʹUIΛهड़Ͱ͖Δ
   

   View Slide

4. View Slide

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ܕͷ
   ϓϩύςΟ
   

   View Slide

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ͷঢ়ଶ͕มΘΔͱɺ
   উखʹมΘΔ
   

   View Slide

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͕͍͍ͭͯΕ͹
   
   

   View Slide

8. • @State
   • @ObservedObject
   • @EnvironentObject
   View Binding༻ͷProperty Wrappers
   Property Wrappersʹ͍ͭͯͷ
   ͘Θ͍͠આ໌͸ɺҎલεϥΠυʹ·ͱΊͨͷͰ
   Α͔ͬͨΒࢀߟʹ͍ͯͩ͘͠͞
   

   View Slide

9. @State
   

   View Slide

10. @State
    • ͍ͪ͹ΜجຊతͳόΠϯσΟϯάํ๏
    

    View Slide

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)
    }
    }
    ͜ͷϓϩύςΟ
    ͷมߋ͕
    ݕ஌Ͱ͖ΔΑ͏ʹͳΔ
    

    View Slide

12. @State ͷಛ௃
    • ੍ݶ
    • એݴͨ͠ViewͱͦͷࢠViewͰ͔͔ͭ͑͠ͳ͍
    • Viewʹؔ܎͕͋ΔʢͰ͖Ε͹ʣprivateͳϓϩύςΟʹ͔ͭ͏
    • Toggleͷঢ়ଶ
    • TabViewͷબ୒ঢ়ଶ,
    • ButtonͷisEnabledɹͳͲ
    

    View Slide

13. @ObservedObject
    

    View Slide

14. • ࣗ࡞Ϋϥεͷঢ়ଶΛόΠϯσΟϯά͢Δ͜ͱ͕Ͱ͖Δ
    @ObservedObject
    

    View Slide

15. struct ContentView: View {
    @State var userFirstName: String
    @State var userLastName: String
    }
    

    View Slide

16. struct ContentView: View {
    @State var user: User
    }
    struct ContentView: View {
    @State var userFirstName: String
    @State var userLastName: String
    }
    ʢTUSVDUʹͨ͠৔߹ʣ
    ϓϩύςΟͷมߋ͕͋Δͱɺ
    શମΛஔ͖׵͑Δඞཁ͕
    ͋ΔͨΊɺDMBTTʹ͍ͨ͠
    ͱ͖͕͋Δ
    

    View Slide

17. struct ContentView: View {
    @State var user: User
    }
    struct ContentView: View {
    @State var userFirstName: String
    @State var userLastName: String
    }
    ʢDMBTTʹͨ͠৔߹ʣ
    VTFSͷมߋ͸ݕ஌Ͱ͖Δ͕ɺ
    VTFSpSTU/BNF
    ͷมߋ͸ݕ஌Ͱ͖ͳ͍
    

    View Slide

18. struct ContentView: View {
    @ObservedObject var user: User
    }
    struct ContentView: View {
    @State var userFirstName: String
    @State var userLastName: String
    }
    

    View Slide

19. class User: ObservableObject {
    @Published var userFirstName: String
    @Published var userLastName: String
    }
    ద߹͢Δͱ
    !0CTFSWFE0CKFDU
    ͱͯ͠࢖͑Δ
    

    View Slide

20. class User: ObservableObject {
    @Published var userFirstName: String
    @Published var userLastName: String
    }
    ద߹͢Δͱ
    !0CTFSWFE0CKFDU
    ͱͯ͠࢖͑Δ
    !1VCMJTIFEΛ͚ͭΔͱ
    มߋΛݕ஌Ͱ͖ΔΑ͏ʹͳΔ
    

    View Slide

21. • ࢖͍Ͳ͜Ζ
    • Viewʹؔ͢ΔclassʢViewModelͳͲʣΛͻͱ·ͱΊʹ͍ͨ͠ͱ͖
    @ObservedObject ͷಛ௃
    

    View Slide

22. @EnvironmentObject
    

    View Slide

23. View Slide

24. class GameSettings: ObservableObject {
    @Published var isHard: Bool = false
    }
    

    View Slide

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Λ

    ࢦఆ
    

    View Slide

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")
    }}}
    ΠχγϟϥΠβʹ
    ౉͢
    

    View Slide

27. UIHostingController(
    rootView: ContentView()
    .environmentObject(GameSettings())
    )
    &OWJSPONFOUʹొ࿥
    

    View Slide

28. • EnvironmentʢViewؒͰڞ༗͢ΔγϯάϧτϯͷΑ͏ͳ΋ͷʣ

    ʹొ࿥͞Ε͍ͯΔ৘ใΛऔΓग़͢
    @EnvironmentObject
    

    View Slide

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

    View Slide

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")
    }}}
    Կ΋౉͞ͳͯ͘Α͍
    

    View Slide

31. • ࢖͍Ͳ͜Ζʢओ؍ʣ
    • ΞϓϦશମͰ࢖͏৘ใͳͲɺ

    ΠχγϟϥΠβͰ౉͍ͯ͘͠ͷ͕ΊΜͲ͍͘͞ͱ͖
    @EnvironmentObject ͷಛ௃
    

    View Slide

32. ·ͱΊ
    

    View Slide

33. • @State
    • ϓϩύςΟΛόΠϯσΟϯάͰ͖Δ
    • @ObservedObject
    • ࣗ࡞ΫϥεΛόΠϯσΟϯάͰ͖Δ
    • όΠϯσΟϯά͢ΔPropertyʹ@PublishedΛ͚ͭΔ
    • @EnvironentObject
    • ΠχγϟϥΠβܦ༝ͰViewؒͷσʔλͷड͚౉͕͠Ͱ͖Δ
    • @EnvironentObject Ͱ Environment ܦ༝Ͱ΋ड͚౉͕͠Ͱ͖Δ
    ·ͱΊ
    

    View Slide

34. • What's New in Swift
    • https://developer.apple.com/videos/play/wwdc2019/402/
    • SwiftUIͷProperty Wrappersͱσʔλ΁ͷΞΫηεํ๏
    • https://qiita.com/shiz/items/6eaf87fa79499623306a
    References
    

    View Slide