【SwiftUI 3.0】confirmationDialog で選択ダイアログを表示する

SwiftUI 3.0 より、「削除」や「送信」などのよくある確認を促すダイアログを想定した confirmationDialog プロパティが追加されました。

サンプルプログラムを組んでみましたので紹介します。

動作確認済環境

MacOSX 11.6(Big Sur)

Xcode 13.0

iOS 15.0

iPhone 13 mini Simulator

【SwiftUI 3.0】confirmationDialog で選択ダイアログを表示する

パラメータ(引数)

  • title: String
    • ダイアログのタイトル文字列を指定します。
    • titleVisibility(後述)が visible で無いと表示されません
  • isPresented: Binding<Bool>
    • 表示トリガーとなる Bool 型の状態変数(@State or @Published)を指定します。
  • titleVisibility: Visibility
    • title の表示・非表示を指定します(visiblehidden・automatic)。
    • visible だった場合、title が空文字でも表示領域は表示されます。

サンプルコード

冒頭スクリーンショットのサンプルコードです。

struct ContentView: View {
    
    @State var isShowDialog = false
    
    var body: some View {
        Button("削除", role: .destructive) {
            isShowDialog = true
        }
        .buttonStyle(.borderedProminent)
        .controlSize(.large)
        .confirmationDialog("データを削除しますか?", isPresented: $isShowDialog, titleVisibility: .visible) {
            Button("削除する", role: .destructive, action: {
                onDelete()
            })
            Button("キャンセル", role: .cancel, action: {
                onCancel()
            })
        }
    }
}

選択肢は複数設置できる

actions には複数の選択肢のボタンを配置できます。動的に30とか100とかの選択肢を入れ込むこともできるようです(自動でスクロールします)。

let selections: [String] = [
    "選択肢1",
    "選択肢2",
    "選択肢3",
    "選択肢4",
    "選択肢5",
    "選択肢6",
    "選択肢7",
    "選択肢8",
    "選択肢9",
    "選択肢10",
    "選択肢11",
    "選択肢12",
]

.confirmationDialog("複数の選択肢", isPresented: $isShowDialog, titleVisibility: .visible) {
    ForEach(selections, id: \.self) { selection in
        Button(selection, action: {})
    }
    Button("キャンセル", role: .cancel, action: {

    })
}
入りきらない選択肢はスクロール表示される

role: .cancel のボタンは必ず後ろになる

role:cancel のボタンを配置するとダイアログの最下部に独立した表示となり、cancel の後にボタンを配置してもそのボタンは手前に表示されます

.confirmationDialog("", isPresented: $isShowDialog, titleVisibility: .hidden) {
    Button("選択肢1", action: {})
    Button("選択肢2", action: {})
    Button("キャンセル", role: .cancel, action: {})
    Button("選択肢3", action: {})
}
キャンセルは必ず最下部

actions が空だとOKボタンが自動挿入される

actions に何も指定しない、または Image などの actions としては無効な View を指定すると、下記のようにOKボタンのみが表示されます。

.confirmationDialog("アクションなし", isPresented: $isShowDialog, titleVisibility: .visible, actions: {})
OKだけなら alert プロパティの方がいいかも

以上