[SwiftUI]@Stateと@Bindingの関係性について
こんばんは。なかがわ（Twitter）です。
今回は、先日書いた@Stateとセットで使われる
@Bindingについて、書いていきたいと思います。
@Stateを付与されたプロパティはSwiftUIの監視下に置かれ、
プロパティ内部に更新があるたびにそれを検知し、
Viewを自動更新するという特徴がありました。
では、@Bindingはどういう振る舞いをするか。見て行きます。
では、よろしくお願いします。
@Bindingって？？
@Bindingをつけることで、View間での双方向のデータ共有が
可能になります。
自らは値を保有せずに、親のプロパティへの参照を表します。
これにより、子View内でのプロパティ更新は、
親のプロパティに反映（＝Viewにも反映）されます。
同様の方法で、子Viewのさらに子Viewへと親プロパティの参照値を
受け継げます。
異なるView間でデータのやり取りができるとありますね。
サンプルコードと、実機の動きを見てみましょう。
今回はメイン画面とサブ画面の２種類のViewを作り、
２つのView間でBool値のデータ共有をし、Bool値の変化によって
wi-fiシンボル画像をif文で分岐させてみました。
// ①Wifiの状態が表示されるメイン画面「 WifiView 」
struct WifiView: View {
@State var isPowerToggle = false // Wifi画像を切り替えるBool型の値 初期値false
var body: some View {
NavigationView{
VStack {
// ON,OFFでWifi画像を切り替える条件分岐
if isPowerToggle == true {
Image(systemName: "wifi")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 200, height: 200)
} else {
Image(systemName: "wifi.slash")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 200, height: 200)
}
// SetUpViewへ遷移する
// SetUpViewにisPowerToggleをバインド
NavigationLink(destination: SetUpView(isPowerToggle: $isPowerToggle)) {
Text("wifi設定→")
.font(.title)
.frame(width: 200, height: 50)
}
} // VStack
} // NavigationView
}// body
}// View
// ②電源のON,OFFを操作するサブ画面「SetUpView」
struct SetUpView: View {
@Binding var isPowerToggle: Bool // 親ViewでState宣言した値を子Viewと共有
var body: some View {
VStack {
// ONボタン
Button(action: {
isPowerToggle = true // ボタンタップで電源ON
}) {
Text("ON")
.font(.title)
.frame(width: 200, height: 50)
}
// OFFボタン
Button(action: {
isPowerToggle = false // ボタンタップで電源OFF
}) {
Text("OFF")
.font(.title)
.frame(width: 200, height: 50)
}
}// VStack
} // body
} // View
実機の動きはこちら↓
①「WifiView」
今回のメイン画面、親Viewとなります。
@Stateを付与したBool型変数「isPowerToggle」を宣言し、
値が変化することでViewが更新され、
Wifiシンボル画像表示がif文によって分岐変化されます。
②「SetUpView」
今回のサブ画面、子Viewとなります。
NavigationLinkを用いてメイン画面から遷移させています。
ONをタップ ⇨ isPowerToggle = true
OFFをタップ ⇨ isPowerToggle = false
@Bindingを付与した「isPowerOn」を子View内に宣言することで
メイン画面の@Stateプロパティと状態を同期させています。
ONをタップすることで、trueがメイン画面の@Stateに
引き渡され、値が変化することでViewが更新されます。
@Bindingでの宣言時、初期値は入れずに宣言します。
（補）@Bindingでの宣言時、初期値は入れずに宣言します。
まとめ
@State、@Bindingの関係性についてでした。
今回はBool型のデータバインディングを行いましたが、
String型やInt型など他の型もバインディングすることができます。
データバインディングについて、これからも調べて行きたいと
思います。ではでは。
以上