【SwiftUI入門】@Bindingを使ってView間でデータを共有しよう

2022年10月13日

1.@Bindingとは

@BindingとはView間でデータを共有できるようにするものです。

データが更新された場合、もう片方のViewのデータも更新されます。

@Bindingを使うには、一方のViewの中で@Bindingを付けて変数を作ります。

struct ViewB: View {
    @Binding var isShowing: Bool
}

この時、変数の値はもう一方のViewの変数の値と連動させるので、初期値は与えません。

もう一方のViewでは共有したい変数の前に@Stateを付けます。

struct ViewA: View {
    @State var isShowing = false}

そして、実際に使う時にこの変数を指定します。

struct ContentView: View {
    @State var isShowing = false
   
    var body: some View {        ViewB(isShowing: $isShowing)    }
}

指定するときは先頭に『$』を付けます。

2.実際に使ってみる

それでは、実際に@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間でデータを共有することができます。

未分類

Posted by mogi0506