【SwiftUI】ActionSheetの使い方

複数の選択肢の中からユーザーが項目を選択するアクションシートについて解説します。

スポンサーリンク

環境

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

【Xcode】11.6
【Swift】5.2.4
【iOS】13.6
【macOS】Catalina バージョン 10.15.6
スポンサーリンク

基本的な使い方

アラートと使い方は同様で、アクションシートの定義と表示する条件を設定します。
複数の選択肢を指定できるのがアラートとの違いです。

①アクションシートの表示フラグ(showingActionSheet)を定義します。
このプロパティがtrueの時にアクションシートを表示します。
SwiftUIに値の変更を監視させる為、@Stateで定義します。

②ボタンがタップされたら、表示フラグをtrueにします。
表示フラグがtrueになったタイミングでアクションシートが表示されます。

③.actionSheet()モディファイアでアクションシートの表示条件を指定します。
引数(isPresented)に、表示可否を示すフラグを渡します。
値では無く、フラグの参照値を渡すために、プロパティ名に$を付けて渡します。
アクションシートが閉じたタイミングで、表示フラグはfalseに戻されます。

④表示するアクションシートをActionSheet構造体で定義します。
引数(title)で表示するアクションシートのタイトルを指定します。
引数(message)でタイトルの下に表示するメッセージを指定します。こちらは省略可能です。
引数(buttons)に選択ボタンを配列で指定します。

アクションシートの例

上記例で、.actionSheet()モディファイアはButtonに定義されていますが、実際はどこに定義されていても問題ありません。
.actionSheet()はButtonに連動するのではなく、あくまで表示フラグに連動するので、必ずしもButtonに定義する必要がありません。

スポンサーリンク

選択ボタンの定義

アクションシートに定義できる選択ボタンは、次の3種類です。

プロパティ名 用途 備考
.default 標準の表示スタイル 青色表示・複数設置可
.destructive 削除等の破壊的変更用表示スタイル 赤色表示・複数設置可
.cancel キャンセル用の表示スタイル 青色表示・ボールド・最下段固定・複数設置不可

各ボタンのイニシャライザは次の通りです。

各ボタン共、タップ時のアクションは省略可能で、省略した場合は何もせずアクションシートを閉じます。
.cancel()ボタンのみラベルも省略可能で、省略した場合はシステムのデフォルト値が入ります。

スポンサーリンク

iPadでの使用

iPadで使用した場合、表示が吹き出しスタイルになります。
また、キャンセルボタンが省略されるようです。

iPadでのアクションシート表示例

スポンサーリンク

あわせて読みたい記事

【SwiftUI】アラートの使い方(alert)
(2020/8/13 更新)ユーザーに確認を促すアラートダイアログを表示する、.alert()の使い方について解説します。
【SwiftUI】シートの使い方(sheet)
Viewをモーダル表示にするシート(sheet)の使い方を解説します。完全な全画面表示ではなく、元の画面の上にカードをのせたようなイメージで、遷移元の画面が少し見えるのがシートの特徴です。
【SwiftUI】@Stateの使い方
SwiftUIのデータバインディングの仕組みの一つである、@Stateについて解説します。プロパティが更新された場合に、参照しているViewも同時に更新される仕組みが実現できます。
Kindle unlimited 読み放題で読める管理人のおすすめ本です!
スポンサーリンク
SwiftUI
カピ通信