$30 off During Our Annual Pro Sale. View Details »

SwiftUI の @State, @ObservedObject, @EnvironmentObject

kumamotone
November 11, 2019

SwiftUI の @State, @ObservedObject, @EnvironmentObject

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

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

kumamotone

November 11, 2019
Tweet

More Decks by kumamotone

Other Decks in Programming

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