SwiftUIで行こう！- @Binding。

@Bindingを考えます。

メインViewがありそこに別Viewとして組み込む場合に使う別Viewの機能を常時監視、実行できるようにするものです。

メインViewで何らかの操作をして別Viewで定義指定いる機能を実行させる場合に@Bindingをつけた変数を別Viewを実装しておくことで別ViewをメインViewに組み込み引数でメインViewのデータを渡した場合に有効となります。

別Viewの構造体の機能をメインViewでも使えるようにするためには別Viewの変数は@Bindingをつけることが必要で、その構造体の引数として受けたデータをメインViewに反映できるようになります。メインViewで渡す引数は"$"をつける必要があります。

コードは以下

import SwiftUI
struct ContentView: View {
   
   @State var isOn2:Bool = false
   
   var body: some View {    
       LightBulb(isOn: $isOn2)
   }
}

struct LightBulb:View {
   @Binding var isOn:Bool
   var body: some View{
       Group {
           if isOn{
               Image(systemName: "lightbulb.fill")
                   .font(.largeTitle)
           }else{
               Image(systemName: "lightbulb")
                   .font(.largeTitle)
           }
       }.onTapGesture(perform: {
           isOn.toggle()
       })
   }
}

struct LightBulb:View {}を作りそれをstruct ContentView: View {}に入れ込んで動作させています。

LightBulbで@Bindingをつけて変数を宣言することで、ContentViewで使う時に引数で受けた時に、LightBulbでのViewの操作、この場合だとタップジェスチャーによりタップすればTrue,Falseを入れ替える動作を伝えます。

でもこれは@Bindingを@Stateでやり直しても同じこと、画像の入れ替えができます。

では、背面の色を変化させる仕組みを作ります。

 VStack{
           LightBulb(isOn: isOn2)
       }
       .frame(maxWidth: .infinity, maxHeight: .infinity)
       .background(isOn2 ? Color.black : Color.white)
       .edgesIgnoringSafeArea(.all)

としてやり先ほどやってみた@Bindingを@Stateでやり変えてみます。動作が違っているのが確認できると思います。Viewの背景が@Stateでは変化しません。@Bimdingをつけてやると背景も変化します。View内で定義してそれを引数でデータの受け渡しする場合には@Bindingを使い受けわたすことができる状態にしないといけません。

ContentViewにサブのViewを埋め込んでそのView内で変数を使用する場合に使います。

『【SwiftUI】SwiftUIで@Bindingを触ってみました。』

動画で紹介されています。