Bindingは、@Stateなどと同じプロパティラッパーの一つで、SwiftUIのデータ管理における重要な役割を持つ。
Bindingによって、あるビューで定義した状態変数を、別のビューで扱うことができるようになる。
具体例を見ていこう。
NavigationLinkを使って2つの画面を行き来するシンプルなアプリだ。
struct ContentView: View {
@State var order = ""
var body: some View {
NavigationView {
VStack {
Text(order)
NavigationLink(destination: InputTextView(text: $order)) {
Text("入力")
}
}
}
}
}
まずメインとなるビューを作成し、2行目で状態変数を定義する。
この状態変数を8行目で別のビュー(InputTextView)にバインドする。
次に、バインドする状態変数を受け取る側のビューを作成する。
struct InputTextView: View {
@Binding var text: String
var body: some View {
TextField("ここに入力してください", text: $text)
.padding()
.textFieldStyle(RoundedBorderTextFieldStyle())
}
}
2行目で、プロパティに@Bindingを付けるのがポイント。
プロパティに@Bindingを付けることで、先述のとおりビューを跨いで扱うことができるようになる。
このアプリを実行し、動作確認をおこなってみる。
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2021/03/image-2.png?resize=808%2C352&ssl=1)
「入力」ボタンをタップすると次のビューに遷移する。
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2021/03/image-3.png?resize=798%2C226&ssl=1)
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2021/03/image-4.png?resize=790%2C230&ssl=1)
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2021/03/image-5.png?resize=782%2C214&ssl=1)
テキストを入力し、元の画面に戻る。
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2021/03/image-6.png?resize=766%2C218&ssl=1)
入力した値が反映されており、バインドした状態変数が2つのビューで共有されていることが分かる。