【SwiftUI】シートの使い方(sheet)

(2021/10/10 更新)

Viewをモーダル表示にするシート(sheet)の使い方を解説します。
完全な全画面表示ではなく、元の画面の上にカードをのせたようなイメージで、遷移元の画面が少し見えるのがシートの特徴です。

画面全体を覆うモーダルViewを表示したい場合は、sheetの代わりにfullScreenCoverを使用します。

スポンサーリンク

環境

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

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

基本的な使い方

SwiftUIは手続き型ではなく宣言型のコーディングスタイルですが、シートも例外ではありません。
その為、「シートを表示する」処理を書くのでは無く、次の.sheet()モディファイアでシート表示Viewの定義と表示する条件を設定します。

【引数】
isPresented
シートの表示可否を決める表示フラグ変数です。シートが閉じられると、表示フラグは自動的に false に戻ります。

使用例

UntitledImage

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

.sheet()は階層的にも使えます。.sheet()で開いた画面からさらに別の画面が.sheet()で開けます。

スポンサーリンク

画面を閉じる方法

.sheet()で表示した画面を閉じる方法には、次の3通りあります。

  • 画面をスワイプで下げる。
  • シートの表示フラグをfalseに書き換える。
  • 環境変数で取得したdismissハンドラーを使用する。

ここでは、最後のdismissハンドラーを使用する例を紹介します。

UntitledImage

dismissハンドラーの詳細はこちらの記事を参照してください。

【SwiftUI】画面を閉じるdismissとisPresentedについて
画面を閉じる為に使うdismissとisPresentedについて解説します。どちらも環境変数(EnvironmentValues)で定義されており、@Environmentプロパティラッパーで取得します。iOS14以前で同様の機能を実...
スポンサーリンク

画面を閉じる時に実行する処理を指定

次のイニシャライザを使用して、画面を閉じる時に実行する処理を指定できます。

【引数】
onDismiss
シートが閉じる時に実行されるクロージャを指定します。

使用例

尚、シートを閉じた時に実行する処理は、.onDisappear()モディファイアでも指定できますが、onDismissで指定する場合とはタイミングが異なります。
詳しくは、こちらの記事で解説しています。

【SwiftUI】Viewの表示/非表示時のアクション定義(onAppear、onDisappear)
(2021/10/09 更新)Viewが表示または消えた時に実行するアクションを指定方法を解説します。
スポンサーリンク

シートにパラメータを渡す

シートにパラメータを渡してカスタマイズするには、次のイニシャライザを使用します。

【引数】
item
sheetに渡すパラメータを含んだオブジェクトのバインディングを指定します。
itemがnil以外の場合に、sheetが表示されます。
itemはIdentifiableに準拠する必要があります。
sheetが破棄された場合、itemは自動的に nil に戻されます。
itemが変更された場合は、sheetは一旦破棄され再描画されます。

使用例

UntitledImage

スポンサーリンク

あわせて読みたい記事

【SwiftUI】モーダル画面の表示(fullScreenCover)
Viewをモーダル表示にするfullScreenCoverの使い方を解説します。iOS14から使えるようになったモディファイアで、カードを重ねたような表示になるシート(sheet)とは異なり、画面全体を覆うモーダルViewを表示します。...
【SwiftUI】アラートの使い方(alert)
(2020/8/13 更新)ユーザーに確認を促すアラートダイアログを表示する、.alert()の使い方について解説します。
スポンサーリンク
SwiftUI
カピ通信