【SwiftUI入門講座Part8】@State、@Bindingを理解しよう。~簡単なアプリを作って使い方を覚えよう~

Part8を選択してcommand + n

①SwiftUI Viewを選択
②Nextをクリック

①Save as:にNextView.swiftと入力
②Createをクリック

これでNextViewが作れました。

NextViewを以下のように変更しましょう。ただ画面をオレンジ色にしただけです。

struct NextView: View {
    var body: some View {
        ZStack {
            Color(.orange)
            Text("NextView")
        }
    }
}

ContentViewを以下のように変更してください。

struct ContentView: View {
    @State var isShowNextView = false
    
    var body: some View {
        Button(action: {
            isShowNextView = true
        }) {
            Text("NextViewへ")
        }
        .sheet(isPresented: $isShowNextView) {
            NextView()
        }
    }
}

現状、下にスワイプすると画面を戻れますがボタンでも戻れるようにしましょう。まずはボタンを作ります。

NextView.swiftに、以下のように、VStackでTextを囲ってButtonを追記しましょう。

struct NextView: View {
    var body: some View {
        ZStack {
            Color(.orange)
            VStack {
                Text("NextView")
                Button(action: {
                    print("ボタンが押されたよ")
                }) {
                    Text("ボタン")
                }
            }
        }
    }
}

画面を閉じるには、画面遷移と逆のことをしましょう。要は、isShowNextViewをfalseにすると言うことです。ですが、isShowNextViewはContentViewで宣言されているので、NextViewでは使えません。

以下のようにCannot find 'isShowNextView' in scopeと言うエラーになります。

では、NextViewでも使えるようにしましょう。そこで@Bindingを使います。

NextViewに以下の変数を追加しましょう。

@Binding var isShowNextView: Bool

このようにやると、プレビューを表示させるコードでエラーになります。今回はプレビューはもう必要ないので削除しましょう。

command + bを押すとエラーがあるかどうかをチェックできます。現時点だと、ContentViewに以下のようにエラーが出ているはずです。

理由としては、NextViewで宣言した、@Bindingに値を渡していないからです。

①丸ぽちを押す
②Fixをクリック

そうすると以下のように、自動でNextViewで宣言した@Bindingが表示されます。

ここにContentViewのisShowNextViewを渡してあげます。

以下のように$をつけて記載してください。

NextView(isShowNextView: $isShowNextView)

NextView(isShowNextView: $isShowNextView)

閉じる処理を入れましょう。ContentViewのisShowNextViewを渡すことができたので、NextViewでも使えるはずです。

以下のように、追記しましょう。

Button(action: {
    print("ボタンが押されたよ")
    isShowNextView = false
}) {

これで、ボタンを押すと、閉じれるようになってるはずです。

これが、@Bindingの使い方です。他のViewの値をいじりたいときは、このように@Bindingを使います。次のPartでも@Bindingを使っていくので、何回も使って覚えていきましょう。