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

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

スポンサーリンク

環境

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

【Xcode】11.5
【Swift】5.2.4
【iOS】13.5
【macOS】Catalina バージョン 10.15.5

基本的な使い方

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

①シートの表示フラグを定義します。
このフラグがtrueの時に、シートを表示します。
SwiftUIに値の変更を監視させる為、@Stateで定義します。

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

③.sheet()モディファイアでシート表示の条件を設定します。
記述方法は次の通り。

引数(isPresented)には、先程定義したシート表示フラグ(showingSheet)を指定します。
値そのものでなく、Binding(参照値)を渡すためにプロパティ名の頭には$を付けます。
対象のシートが閉じられるタイミングで、シート表示フラグは自動的にfalseに戻されます。

sheetの例

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

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

画面を閉じる方法

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

  • 画面をドラックで下げる。
  • シートの表示フラグをfalseに書き換える。
  • 環境変数の「presentationMode」プロパティで「dismiss」メソッドを呼び出す。

ここでは最後のpresentationModeプロパティを使う方法を解説します。

必要なのは次の2行のみです。

使用例

先程のサンプルのSecondViewに閉じるボタンを追加した例です。

閉じボタンを付けた例

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

画面を閉じた時に実行する処理を、.sheet()モディファイアの引数onDismissで指定できます。

次のコードはonDismiss引数を指定して.sheet()モディファイアを使用した例です。

あわせて読みたい記事

【SwiftUI】アラートの使い方(alert)
ユーザーに確認を促すアラートダイアログを表示する、.alert()の使い方について解説します。
SwiftUI
スポンサーリンク
カピ通信