【SwiftUI】Alertの使い方

ユーザーに確認を促すアラートダイアログを表示する、Alertの使い方について解説します。

スポンサーリンク

環境

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

【Xcode】11.2.1
【Swift】5.1
【iOS】13.2.2
【macOS】Catalina バージョン 10.15.3

一般的な使い方

SwiftUIは手続き型ではなく宣言型のコーディングスタイルですが、Alertも例外ではありません。
その為、「アラートを表示する」処理を書くのでは無く、アラートを定義し、表示する条件を設定します。

①アラートの表示フラグ(showingAlert)を定義しています。
このプロパティがtrueの時にアラートを表示します。
SwiftUIに値の変更を監視させる為、@Stateで定義します。

②ボタンがタップされたら、表示フラグをtrueにします。
表示フラグがtrueになったタイミングでアラートが表示されます。

③alert() Modifierでアラートの表示条件を設定します。
具体的には、引数(isPresented)に、アラート表示フラグ(showingAlert)を渡します。
表示フラグの値そのものではなく、参照値を渡す為にプロパティ名の頭には$を付けます。
なお、アラートが閉じられるタイミングで、表示フラグはfalseに戻されます。

④表示するアラートをAlert構造体で定義します。
引数(title)に表示するアラートのタイトルを指定します。

一般的なAlert

上記例では、alert() ModifierがButtonに定義されていますが、実際はどこに定義されていても問題ありません。
alert()はButtonに連動するのではなく、あくまで表示フラグに連動するものですので、必ずしもButtonに定義する必要がありません。

詳細メッセージを追加する

アラートに詳細メッセージを追加するには、Alert構造体に引数(message)で指定します。
タイトルと同様Text Viewで設定します。

メッセージ付きのAlert

ボタンの変更

ボタンは独自のものに置き換えが可能です。
Alert構造体の引数(dismissButton)で、置き換えるボタンをAlert.Button構造体で指定します。
ボタン自体のカスタマイズについては、別のセクションで解説します。

ボタンを変更したAlert

ボタンを2つにする

引数(dismissButton)の代わりに、2つの引数(primaryButton、secondaryButton)を使って、ユーザーが選択可能な2つボタンにできます。

ボタンが2つのAlert

ボタンのカスタマイズ

アラートに表示するボタンは、Alert.Button構造体で定義します。
Alert.Button構造体では、表示スタイルの変更と、タップした時の処理指定ができます。

表示スタイルの変更

Alert.Button構造体のプロパティ選択により、次の3種類の表示スタイルが選べます。

プロパティ名 用途 備考
.default 標準の表示スタイル 青色表示
.cancel キャンセル用の表示スタイル 青色表示・ボールド・左側固定
.destructive 削除等の破壊的変更用表示スタイル 赤色表示

ボタンの表示スタイルを変更したAlert

CancelボタンはAppleのUIポリシーにより、左側固定になります。

ボタンをタップした時の処理指定

Alert.Button構造体の引数(action)で、該当のボタンがタップされた時の処理を記述可能です。
これにより、ユーザーの選択に応じて実行する処理を定義可能です。

あわせて読みたい記事

【SwiftUI】@Stateの使い方
SwiftUIのデータバインディングの仕組みの一つである、@Stateについて解説します。
【SwiftUI】Buttonの使い方
Buttonは、ユーザーがタップして何かをするの使う処理を記述するViewです。