alertとconfirmationDialogを使ってみた

はじめに

ユーザーに確認や警告を表示する場合、alert や confirmationDialog を使うと思います。
今回はalert と confirmationDialog について整理してみたいと思います。

alert について

alert は、ユーザーに注意や確認を促すための表示です。
アプリでは、入力にミスがあった時や何か削除をする際の警告などに使われることが多いかと思います。

struct ContentView: View {
    @State private var isShowAlert = false

    var body: some View {
        Button {
            isShowAlert = true
        } label: {
            Text("alertを表示")
        }
        .alert("タイトル", isPresented: $isShowAlert) {
            Button("キャンセル", role: .cancel) {}

            Button("OK") {}
        } message: {
            Text("メッセージを表示します")
        }
    }
}

表示した画像

confirmationDialog について

confirmationDialog は、ユーザーに複数の選択肢から操作を選んでもらうための表示です。

alert と異なり3つ以上の選択肢の場合でも違和感なく使うことが可能です。

confirmationDialog はiOS 15以降の機能のため、14未満を網羅したい場合は、ActionSheetを使う必要があります。

struct ContentView: View {
    @State private var isShowDialog = false
    
    var body: some View {
        Button {
            isShowDialog = true
        } label: {
            Text("alertを表示")
        }
        .confirmationDialog("タイトル", isPresented: $isShowDialog, titleVisibility: .visible) {
            Button("登録") {}
            
            Button("変更") {}
            
            Button("削除", role: .destructive) {}
        } message: {
            Text("メッセージを表示します")
        }
    }
}

表示した画像

まとめ

今回は alert と confirmationDialog について整理しました。

どちらもユーザーに判断を求めるUIですが、alert は警告や確認、confirmationDialog は複数の操作から選択してもらう場面に向いています。

実装自体はどちらもシンプルですが、表示する内容や選択肢の数によってユーザーに与える印象が変わるため、用途に合わせて使い分けるのがよさそうです。