【SwiftUI】アラートのボタンをタップしたときの処理を追加する | プログラマーになった「中卒」男のブログ

先日の記事で、SwiftUIのアラートに二つのボタンを実装する方法を紹介した。

【SwiftUI】アラートに二つのボタンを実装する方法

今回はこのコードを改変し、それぞれのボタンに対し、ボタンをタップしたときの処理を追加する方法を紹介する。

まずは前回のコードを見てもらう。

struct ContentView: View {
    @State var showingAlert = false
     
    var body: some View {
        Button(action: {
            self.showingAlert = true
        }) {
            Text("アラートを表示する")
        }
        .alert(isPresented: $showingAlert) {
            Alert(title: Text("質問"),
                  message: Text("あなたはどっち派？"),
                  primaryButton: .default(Text("たけのこ")),
                  secondaryButton: .destructive(Text("きのこ"))
            )
        }
    }
}

これは単にボタンを表示するだけのアラートだったが、このコードを改変していく。

サンプルコード

まずはコード全文を載せておく。

struct ContentView: View {
    @State var showingAlert = false
    @State var answerMessage = ""
        
    var body: some View {
        let onButtonTapKinoko = {
            self.answerMessage = "あなたはキノコ派です"
        }
        let onButtonTapTakenoko = {
            self.answerMessage = "あなたはタケノコ派です"
        }
        
        return VStack {
            Button(action: {
                self.showingAlert = true
            }) {
                Text("アラートを表示")
            }
            .alert(isPresented: $showingAlert) {
                Alert.init(
                    title: Text("質問"),
                    message: Text("あなたはどっち派？"),
                    primaryButton: .destructive(Text("キノコ"),
                                                action: onButtonTapKinoko),
                    secondaryButton: .cancel(Text("タケノコ"),
                                             action: onButtonTapTakenoko)
                )
            }
            Text(answerMessage)
        }
    }
}

少しコードの解説をしておく。

3行目で、answerMessageという状態変数を定義しておく。

6〜11行目は、ボタンタップ時の処理を計算型プロパティとして用意している。

事前準備はここまでで、後はアラートの各ボタンのaction引数に処理を実行する計算型プロパティ（onButtonTapKinoko、onButtonTapTakenoko）を渡すだけだ。

プレビューで確認すると、アラートのボタンをタップすることで状態変数の中身が書き変わっていることが分かる。