【SwiftUI】confirmationDialogの使い方

複数の選択肢の中からユーザーが項目を選択するconfirmationDialogの使い方を解説します。
iOS15から使えるようになったモディファイアで、iOS14以前ではActionSheetと呼ばれていました。
iOS14以前の解説はこちらを参照してください。

(アーカイブ)【SwiftUI】ActionSheetの使い方
(2021/05/29 更新)複数の選択肢の中からユーザーが項目を選択するアクションシートについて解説します。本記事で使用しているactionSheetおよびActionSheetはiOS15以降では非推奨となっています。最新の情報...

スポンサーリンク

環境

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

【Xcode】13.1
【Swift】5.5
【iOS】15.0
【macOS】Big Sur バージョン 11.6
スポンサーリンク

基本的な使い方

使い方はalertとほぼ同様ですが、タイトルの表示可否を titleVisibility で指定する必要があります。

または

【引数】
"タイトル"
ダイアログのタイトルとして使用するテキストを第一引数で指定します。
指定したタイトルが表示されるか否かは、後述の titleVisibility によって決まります。

isPresented
ダイアログを表示するかどうかを決定する表示フラグ変数です。
ユーザーがダイアログアクションの1つをタップすると、表示フラグは自動的にfalseに戻ります。

titleVisibility(省略可)
タイトルの表示可否を、.visible(表示) または .hidden(非表示)で指定します。
省略した場合は、デフォルトの.automatic(コンポーネントのポリシーによって表示非表示を決定)が設定されます。

actions
ダイアログに表示するアクションボタンリストをButtonのリストで定義します。
ダイアログ内の全てのアクションは、処理実行後に表示フラグをfalseにしてアラートを閉じます。

アクションが一つも存在しない場合、デフォルトで"OK"アクションが提供されますが、そのように選択肢を提供しないケースでは、alert を代わりに使用すべきです。

messages (省略可)
タイトルの下に表示する詳細メッセージをTextで定義します。
Textのスタイル指定あるいは複数のText表示はサポートされません。

使用例

下記例では confirmationDialog モディファイアをButtonに定義していますが、必ずしも対象のButtonに定義する必要はありません。
confirmationDialogはButtonに連動するのではなく、あくまで表示フラグに連動する為です。
尚、選択肢が1つ以上ある場合、キャンセルボタンが自動で付加されます。

UntitledImage

スポンサーリンク

横向き表示の特殊な表示スタイル

タイトルおよびメッセージを非表示にしたconfirmationDialogをiPhoneの横向き(landscape)で出力したケースでのみ、次のような表示スタイルが採用されます。
選択肢が増えて1列で表示しきれなくなると通常の表示スタイルにに戻ります。

UntitledImage

スポンサーリンク

ボタンの表示スタイル指定

アラートダイアログに使用するボタンは、roleオプションで表示スタイルを指定できます。

指定できるのは次の3種類です。

未指定またはnil
role未指定の場合は標準の表示スタイルである、青色表示になります。

.cancel
キャンセル用の表示スタイルです。
青色のボールド表示で、横表示の場合は常に右側、縦表示の場合は常に一番下に表示されます。
また、キャンセルボタンは最大1つしか表示されません。

.destructive
削除等の破壊的変更用の表示スタイルで、赤色表示になります。

【SwiftUI】Buttonの使い方
(2021/10/19 更新)ラベルとアクションを持つButtonの使い方を解説します。

使用例

UntitledImage

なお、ボタンの数が多くて表示しきれない場合は、ボタンリストがスクロールできるようになります。

スポンサーリンク

あわせて読みたい記事

【SwiftUI】アラートの使い方(alert)
ユーザーに確認を促すアラートダイアログを表示する、.alert()の使い方について解説します。iOS15から使い方が大きく変わりました。iOS14以前のアラートの使い方はこちらの記事を参照してください。
【SwiftUI】Buttonの使い方
(2021/10/19 更新)ラベルとアクションを持つButtonの使い方を解説します。
スポンサーリンク
SwiftUI
カピ通信