SwiftUIでいこう! - @Binding
参考サイトを見ながら自分でも実際に試してみます。まずは
@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"を使うことが必要です。
この記事が気に入ったらサポートをしてみませんか?