SwiftUIでいこう！ - @Binding

【SwiftUI】@Stateの使い方

参考サイトを見ながら自分でも実際に試してみます。まずは

@State private var isOn = false

@Stateを使ってデータのやりとりがリアルタイムに受け渡しができるかやってみます。ボタン

Button(action: {
　isOn.toggle()
}) {
　Image(systemName: "power")
}

を押すと

文字の"On"と"OFF"が入れ替わります。

Text(isOn ? "ON" : "OFF")

全体です。

import SwiftUI
import PlaygroundSupport

struct ContentView: View {

   @State private var isOn = false
   
   var body: some View {
       VStack {
           Button(action: {
               isOn.toggle()
           }) {
               Image(systemName: "power")
           }
           .padding()
           
           Text(isOn ? "ON" : "OFF")
       }
       .frame(width: 200, height: 200, alignment: .center)
   }
}

let content = ContentView()
PlaygroundPage.current.liveView = UIHostingController(rootView: content)

XcodeのPlaygroundでやる時は以下が必要です。

import SwiftUI
import PlaygroundSupport

と

let content = ContentView()
PlaygroundPage.current.liveView = UIHostingController(rootView: content)

実行してボタンを押すと、 "isOn.toggle()"で

trueとfalseが入れ替わり、三項演算子で判定して文字"ON","OFF"を入れ替えます。

Text(isOn ? "ON" : "OFF")

うまくできたので、今のコードで

 Button(action: {
               isOn.toggle()
           }) {
               Image(systemName: "power")
           }
           .padding()

の部分を独自の"struct"構造体にすることでで新しいViewに分けます。

まずは"ContentView"と同じように

@State

で宣言した変数で作ってみます。

struct CustumButton: View {
   @State var isOnOff: Bool
   
   var body: some View {
       Button(action: {
           isOnOff.toggle()
       }) {
           Image(systemName: "power")
       }
       .padding()
   }
}

これを"ContentView"に入れて実行します。"CustumButton()"の引数には

ContentViewの変数

@State private var isOn = false

"isOn"を入れます。

struct ContentView: View {
   @State private var isOn = false
   var body: some View {
       VStack {
       
           CustumButton(isOnOff: isOn)
           
           Text(isOn ? "ON" : "OFF")
       }
       .frame(width: 200, height: 200, alignment: .center)
   }
}

これを実行すると

という風に表示されます。このボタンを押してみると変化はありません。"OFF"はそのまま"OFF"です。

CustumButton()でボタンを押して変数を

isOnOff.toggle()

で変更しているはずですが、"ContentView"の変数の"isOn"に渡っていないのが原因です。

そこで登場するのが

@Bindeing

です。"CustumButton" の変数を

@Binding var isOnOff: Bool

としてやります。@Bindingとすることで、受ける側の引数を、

CustunButtom(isOnOff: $isOn)

"$"をつけて"$isOn"とします。これで実行してやると、しっかりと"ON","OFF"が切り替わります。

View間のデータの受け渡しをするときは"@Binding"を使うことが必要です。