【SwiftUI入門】@Binding
この記事の目次
@Bindingとは
@BindingとはView間でデータを共有できるようにするものです。
データが更新された場合、もう片方のViewのデータも更新されます。
@Bindingの使い方を説明します。
例としてbool型を使いますが、別の型でも使えます。
@Bindingを使うには、一方のViewの中で@Bindingを付けて変数を作ります。
| struct ViewA: View { @Binding var isShowing: Bool } |
この時、変数の値はもう一方のViewの変数の値と連動させるので、初期値は与えません。
もう一方のViewでは共有したい変数の前に@Stateを付けます。
| struct ViewB: View { @State var isShowing = false var body: some View { } } |
そして、実際に使う時にこの変数を指定します。
| struct ViewB: View { @State var isShowing = false var body: some View { ViewA(isShowing: $isShowing) } } |
指定するときは先頭に『$』を付けます。
実際に使ってみる
それでは、実際に@Bindingを使ってみましょう。
今回はViewを二つ作り、それらのViewでBool型の変数を共有しようと思います。
そして、ボタンを押したらBool型の変数がtrueになって、sheetが呼ばれるようにします。
sheetで呼ばれたViewにはBool型の変数が表示されるようにして、値を確認できるようにします。
まずは、SwiftUIのプロジェクトを作成してください。
プロジェクトを作成したら、Viewを作ります。
ContentViewの
下に、
| struct AnotherView: View { @Binding var isShowing: Bool var body: some View { Text(isShowing.description) } } |
と記述しましょう。
コードについて説明します。
このコードは、新しくViewを作るといった内容です。
Viewの中ではisShowingという名前の
Bool型の変数を作っています。
@Bindingを付けているので、
他のViewと値を共有することができます。
また、@Bindingを付けた場合、値は他のViewで使う時に格納されるので、初期値を入れることができません。
bodyの中にはisShowingの値が表示されるTextを記述しています。
isShowingの後に付けたdescriptionは
Bool型をString型に変える記述です。
AnotherVIewはContentVIewの中で使うのですが、その前にContentViewでAnotherVIewのisShowingと連動させる変数を作りましょう。
ContentVIewの中に
| @State var isShowing = false |
と記述しましょう。
コードについて説明します。
このコードはBool型の変数isShowingを作るといった内容です。
初期値にはfalseを入れます。
この変数は、後ほど、AnotherViewのisShowingと連動させます。
@Stateを付けていますが、
@Bindingがついた変数と連動させる場合、付ける必要があるため付けています。
次に、押したらisShowingがtrueになるボタンを作りましょう。
| Text(“Hello, world!”) .padding() |
を
| Button(action: { isShowing = true}) { Text(“AnotherViewを出す”)} |
と書き換えましょう。
コードについて説明します。
このコードは見た目が『AnotherViewを出す』というTextの
ボタンを作成するといった内容です。
ボタンを押したら、isShowingがtrueになります。
次に、isShowingがtrueになったらAnotherViewが表示されるようにしましょう。
Buttonの下に
| .sheet(isPresented: $isShowing, content: { AnotherView(isShowing: $isShowing)}) |
と記述しましょう。
このコードはisShowingの値が、
trueになったらsheetが表示されるといった内容です。
sheetの内容はAnotherViewです。
AnotherVIewのisShowingには
ContentViewのisShowingを指定しています。
このように記述することでContentViewのisShowingとAnotherViewのisShowingの値を共有することができます。
実際に共有されるようになったのか、確かめてみましょう。
シミュレータの実行ボタンを押してください。
シミュレータが起動したら、『AnotherViewを出す』ボタンを押してください。
ボタンを押したら『true』と表示されますね。
AnotherViewの初期値には値を入れていないため、うまく値が共有できているのがわかります。
このように、@Bindingを使えばView間でデータを共有することができます。