SwiftUI/PropertyWrapper

Tag: SwiftUI/PropertyWrapper

目次†

関連ページ†

参考情報†

• SwiftUIのデータ管理 Property Wrapper編

Property Wrapperの種類†

• @State、@Binding、@StateObject、@ObservedObjectなどデータを管理するためのProperty Wrapperがたくさん存在する

@State†

• データが値型。データの更新あり。データの発生源がVIewの場合に使用。
• ボタンをタップするとその数字が増える。

  struct StateSample: View {
      private var counter = 0
      var body: some View {
          Button(action: {
              self.counter += 1
          }, label: {
              Text("counter is \(counter)")
          })
      }
  }
  
  

@Binding†

• データが値型。データの更新あり。データの発生源は外部。

  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†

• Viewの環境値を読み取れるもの。KeyPathを指定する。

  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プロトコル†

• @StateObject、@ObservedObject、@EnvironmentObjectとして使用するデータオブエクトに実装。

  class DataSource: ObservableObject {
    @Published var counter = 0
  }
  

@StateObject†

• データが参照型のデータオブジェクト。データの発生源がVIewの場合に使用。
• iOS 14以降。

  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†

• データが他参照のデータオブジェクト。データの発生源が外部。

  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†

• 参照型オブジェクトを子ビューでアクセスできるようになる。

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

Contents

メニュー

• about
• blog
• blog(はてな)

配布物

• FaEdit
  • ヘルプ
  • BugTrack
• WikiHelpMaker
  • ヘルプ
  • BugTrack

ゲーム

• 時のオカリナ3DS
• ドラゴンズドグマ
• スプラトゥーン2
• DQB2
• ジョイコン

ショートカット

• 用語集A-Z
• 用語集ア-ワ

今日の20件

最新の20件