【SwiftUI】アラートダイアログの基本的な使い方

この記事の情報は次のバージョンで動作確認しています。

* MacOS Monterey (12.1)
* Xcode (13.3.1)

はじめに

今回はSwiftUIで↑にあるようなアラートダイアログを出す方法についてです。

アラートダイアログを表示

ダイアログを表示するトリガーを作成

最初に表示するトリガー処理を作っていきます。

トリガーには@StateのBool型変数が必要になります。

 @State private var isShowDialog: Bool = false

ボタンイベント等でアラートを表示したいタイミングでtoggle()をします

toggle()はBool型のtrueとfalseを入れ替えるメソッドです。

trueのタイミングでダイアログが表示されるようにしていきます。

 Button {
    isShowAlert.toggle()
} label: {
    SomeView()
}

↑のSomeView()は好きなUIにしてください。

これでトリガー部分はできました。

ダイアログを表示する処理を作る

トリガーができたので表示処理を作っていきます。

表示は.alertモディファイアを使います。

どこにモディファイアにあてるかですが、決まりはないです。

可読性を考えるとトリガーになっているViewに対してモディファイアするのがいいと思います。

今回でいうとButtonですね。

で、以下のように書くことでダイアログが表示されます。

.alert("タイトル", isPresented: $isShowAlert,
                actions: {
                    Button(・・・)
                    Button(・・・)
                   ~~~~~~~省略~~~~~~~~
                },
                message: {
                    Text("メッセージ")
                })

ポイントはisShowAlertの部分で、この変数がtrueになったタイミングで次の行が実行されるといったフローとなります。

isShowAlertの先頭に$をつけることを忘れないようにしましょう。

これでアラートの表示が完成しました！

Alertを使うともっと直感的に実装できます。

デザイン部の実装方法としてはAlertを使った書き方もできます。

.alert(isPresented: $isShowAlert) {
      Alert(
          title: Text("タイトル"),
          message: Text("メッセージ"),
          primaryButton: .default(Text("OK"), action: {
              // OK押した時の処理を書く
          }),
          secondaryButton: .default(Text("Cancel"))
      )
}

UIKit(Storyboard)を使っていた方はこちらの方がなじみがあると思います。