【SwiftUI】アラートの使い方(alert)

(2020/8/13 更新)

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

スポンサーリンク

環境

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

【Xcode】11.6
【Swift】5.2.4
【iOS】13.6
【macOS】Catalina バージョン 10.15.6
スポンサーリンク

基本的な使い方

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

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

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

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

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

一般的なAlert

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

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

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

メッセージ付きのAlert

ボタンの変更

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

ボタンを変更したAlert

ボタンを2つにする

引数(dismissButton)の代わりに、2つの引数(primaryButton、secondaryButton)を使って、ユーザーが選択可能な2つボタンにできます。
通常はprimaryButtonが左側に、secondaryButtonが右側に表示されます。

ボタンが2つのAlert

スポンサーリンク

ボタンのカスタマイズ

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

表示スタイルの変更

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

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

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

Cancelボタンを指定した場合はAppleのUIポリシーにより、必ず左側に表示されます。
また、primaryとsecondaryの両方にCancelボタンを指定した場合は、実行時にエラーになります。

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

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

スポンサーリンク

あわせて読みたい記事

【SwiftUI】複数のアラート(alert)を使う方法
1画面内で複数のアラートを使い分ける方法を解説します。
【SwiftUI】ActionSheetの使い方
複数の選択肢の中からユーザーが項目を選択するアクションシートについて解説します。
【SwiftUI】@Stateの使い方
SwiftUIのデータバインディングの仕組みの一つである、@Stateについて解説します。プロパティが更新された場合に、参照しているViewも同時に更新される仕組みが実現できます。
Kindle unlimited 読み放題で読める管理人のおすすめ本です!
スポンサーリンク
SwiftUI
カピ通信