確認ダイアログの作成方法「confirmationDialog」

iOS：15.0以上
XCode（当サイトの環境）：15.0.1

本記事では、SwiftUIでの確認ダイアログの使い方について解説します。
確認ダイアログは、ユーザーに重要なアクションを実行する前に確認を求めるための便利なUI要素です。

SwiftUIでは、.confirmationDialog修飾子を使用して簡単に確認ダイアログを実装できます。
この機能を使って、ユーザーの誤操作や意図しないアクションを防止し、アプリの使いやすさを向上させることができます。

パラメータ
confirmationDialog のシンプルな使い方
キャンセルボタンを明示的に作成
まとめ

パラメータ

title：ダイアログのタイトルを指定します。文字列またはテキストビューを渡すことができます。
isPresented：ダイアログが表示されるべきかどうかを制御するブール値のバインディングです。通常、@State変数として使用され、ボタンなどのトリガーアクションによって制御されます。
actions：ダイアログ内に表示するコンテンツを定義するクロージャです。このクロージャには、ユーザーが選択できるアクションボタンを含むビューが含まれます。
titleVisibility：タイトルの表示／非表示を切り替えることが出来ます。

confirmationDialog のシンプルな使い方

確認ダイアログを表示したいボタンにconfirmationDialogを付与します。確認ダイアログに表示するボタンにはroleを設定して役割を分かりやすくしています。

import SwiftUI

struct ConfirmationSmp: View {
    @State private var showingConfirmation = false
    var body: some View {
        Button("Show Confirmation") {
            showingConfirmation = true
        }
        .confirmationDialog("Delete Item", isPresented: $showingConfirmation, titleVisibility: .visible) {
            Button("Delete", role: .destructive) {
                // Delete action
            }
        }
    }
}

画面上のボタンを押すと画面下部より、確認ダイアログが表示され“Delete”と“Cancel”の２つのボタンで意思確認ができます。
“Delete”ボタンには.destructiveロールが適用され、赤いテキストで表示され、取り返しがつかないアクションなどを表します。一方、“Cancel”ボタンは自動的に作成されます。なお、キャンセルボタンの表示を変えることももちろん可能です。

キャンセルボタンを明示的に作成

デフォルトでは英語で「Cancel」と表示されます。キャンセルボタンを明示的に作成することで表示内容を変更することができます。

ボタンViewをもう一つ追加して「role: .cancel」を設定してあげることで明示的にキャンセルボタンを表示することができます。

import SwiftUI

struct ConfirmationSmp: View {
    @State private var showingConfirmation = false
    var body: some View {
        Button("Show Confirmation") {
            showingConfirmation = true
        }
        .confirmationDialog("Delete Item", isPresented: $showingConfirmation, titleVisibility: .visible) {
            Button("Delete", role: .destructive) {
                // Delete action
            }
            Button("キャンセル", role: .cancel) {
                // cancel action
            }
        }
    }
}