【SwiftUI】確認ダイアログの表示方法

本記事では、SwiftUIを用いて確認ダイアログを表示する方法を解説していきます。

1. 確認ダイアログとは
2. 確認ダイアログの設置
3. 確認ダイアログ詳細設定
4. 確認ダイアログの選択肢を増やす
5. まとめ

確認ダイアログとは

SwiftUIにおける確認ダイアログとは、アラートと似たような機能で、ボタンのクリックイベントなどで画面上に文言や選択肢などを表示する機能です。画面下から出現し、選択肢をクリックすることで指定したアクションを行なって確認ダイアログを閉じることができます。

アラートについてもこちらの記事で解説していますのでぜひ参考にしてください！

IT図書館

2024.07.10

【SwiftUI】アラートの表示と使用方法

https://jinluvman.com/archives/2024/07/10/1928

本記事では、SwiftUIでアラートを表示する方法について解説していきます。アラートを使用することで項目の削除時の確認やデータを更新するときの最終確認を行うことができます。アラートとはアラートとは、アプリケーション上でユーザが操作を行った際に、本当にユーザが意図して行った操作であるかを確認する際に表示する画面になります。アラートはユーザが操作を行っていた画面の上に被さるように表示されます。例えば、登録していたデータの削除や登録済みの情報を更新する際など、操作後にデータを戻すことができない場合に最終確...

確認ダイアログの設置

確認ダイアログを表示するには、まず確認ダイアログを表示するためのボタンを起きます。そしてボタンのクリックによって確認ダイアログを表示するかどうかを判断するための真偽値型の@State型変数を用意します。

初期状態では、確認ダイアログは非表示にしておきたいためBool型の変数はfalseに設定しておきます。

@State var isShowDialog = false

配置したボタンに対して.confirmationDialogモディファイアをつけることで確認ダイアログを設置することができます。

confirmationDialogモディファイアの設置は、ライブラリパネルのModifiersライブラリから「confirmation Dialog」をドラッグ&ドロップします。

ライブラリパネルはCommand+ Shift+LかXcode右上の+ボタンから表示することができます。

確認ダイアログ設置後のソースコードは以下になります。

confirmationDialogは、ボタンの後ろにつけます。ボタンはクリックのactionでisShowDialog変数をtrueに変更します。

Button(action: {
　　　　isShowDialog = true
}) {
　　　　Text("登録ボタン")
}.confirmationDialog(titleKey: LocalizedStringKey, isPresented: Binding<Bool>) {
    Code
}

以降で確認ダイアログの詳細な設定値について解説していきます。

確認ダイアログ詳細設定

確認ダイアログモディファイアにパラメータとして渡すことのできる設定値は主にtitleKey,isPresented,action,messageの4つになります。

titleKeyには、確認ダイアログのタイトルを設定します。タイトルには「確認！」や「注意！」などが入ることが一般的にみられます。デフォルトでは表示されない設定になっているため、パラメータにtitleVisibility: .visibleを設定することで表示できるようになります。

isPresentedには、ダイアログの表示・非表示を切る変える判断を行うための真偽値の変数を渡します。変数の値がtrueとなったタイミングで表示され、falseで非表示となります。

actionには、確認ダイアログ上に表示する各選択肢の定義をButtonとして格納することができます。

actionの中に配置するButtonはButton(_,role){}と定義し、第一引数にはボタンとして表示する文字列を、第二引数のroleにはボタンの種類を設定します。roleにdestructiveを設定すると赤文字に、cancelを設定すると他の要素と切り離されたキャンセルボタンとなります。また、roleを省略した場合には青文字の標準ボタンとなり、一般選択肢を意味します。

messageには、タイトル下に表示する確認ダイアログの説明文言を設定することができます。

Button(action: {
                isShowDialog = true
            }) {
                Text("登録ボタン")
            }.confirmationDialog("登録の確認", isPresented: $isShowDialog, titleVisibility: .visible, actions: {
                Button("登録", role: .destructive){
                    print("登録しました")
                }
                Button("キャンセル", role: .cancel){
                    print("キャンセルしました")
                }
                
            }, message: {
                Text("入力内容を登録してよろしいですか。")
            })

表示結果

確認ダイアログの選択肢を増やす

確認ダイアログは、選択肢一つとキャンセルボタンだけでなく、複数の選択肢の中から一つを選んでもらい、選択肢の内容によって異なるアクションを実行することができます。

選択肢を増やすには、用意したい選択肢の数だけactionパラメータの中にButtonを配置します。これによって、例えば登録、更新、削除などの異なる選択肢を一つの確認ダイアログだけで実現することもできます。

Button(action: {
                isShowDialog = true
            }) {
                Text("登録ボタン")
            }.confirmationDialog("登録の確認", isPresented: $isShowDialog, titleVisibility: .visible, actions: {
                Button("登録", role: .destructive){
                    print("登録しました")
                }
                Button("更新"){
                    print("更新しました")
                }
                Button("一時登録"){
                    print("一時登録しました")
                }
                Button("キャンセル", role: .cancel){
                    print("キャンセルしました")
                }
                
            }, message: {
                Text("入力内容を登録してよろしいですか。")
            })

表示結果