Viewをモーダル表示にするfullScreenCoverの使い方を解説します。
iOS14から使えるようになったモディファイアで、カードを重ねたような表示になるシート(sheet)とは異なり、画面全体を覆うモーダルViewを表示します。
環境
この記事の情報は次のバージョンで動作確認しています。
【Xcode】13.0
【Swift】5.5
【iOS】15.0
【macOS】Big Sur バージョン 11.6
基本的な使い方
使い方は、sheet モディファイアと全く同一ですので、各イニシャライザの詳しい説明は【SwiftUI】シートの使い方(sheet)を参照してください。
fullScreenCoverは、sheetと異なりスワイプで画面を閉じるれないので、閉じる仕組みを開発者が用意する必要があります。
fullScreenCoverは階層的にも使えます。fullScreenCoverで開いた画面からさらに別の画面がfullScreenCoverで開けます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
|
.fullScreenCover(isPresented: Binding<bool>) { // モーダル表示するViewを指定 } .fullScreenCover(isPresented: Binding<bool>, onDismiss: { シートを閉じる時に実行する処理 }) { // モーダル表示するViewを指定 } .fullScreenCover(item: $item) { item in // モーダル表示するViewを指定 } .fullScreenCover(item: $item, onDismiss: { シートを閉じる時に実行する処理 }) { item in // モーダル表示するViewを指定 } |
【引数】
isPresented
モーダルViewの表示可否を決める表示フラグ変数です。モーダルViewが閉じられると、表示フラグは自動的に false に戻ります。
onDismiss
モーダルViewが閉じる時に実行されるクロージャを指定します。
item
モーダルViewに渡すパラメータを含んだオブジェクトのバインディングを指定します。
itemがnil以外の場合に、モーダルViewが表示されます。
itemはIdentifiableに準拠する必要があります。
モーダルViewが破棄された場合、itemは自動的に nil に戻されます。
itemが変更された場合は、モーダルViewは一旦破棄され再描画されます。
使用例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
|
struct ContentView: View { @State private var showingModal = false var body: some View { Button("モーダル画面を開く") { self.showingModal.toggle() } .fullScreenCover(isPresented: $showingModal) { SecondView() } } } struct SecondView: View { @Environment(\.dismiss) var dismiss var body: some View { ZStack { Color.yellow Button("画面を閉じる") { dismiss() } } } } |

上記使用例では、モーダル画面の範囲がわかるように、背景の色を変えています。
セーフエリアを含めてた範囲もカバーしたい場合は、こちらの記事で解説しているignoresSafeAreaモディファイアを使用してください。

【SwiftUI】Viewをセーフエリア外に拡張する(ignoresSafeArea)
(2022/03/27 更新) Viewをセーフエリア外に拡張する .ignoresSafeArea() モディファイアについて解説します。 iOS14から使えるようになったモディファイアで、以前からあった .edgesIgnoringSa...
あわせて読みたい記事

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

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

【SwiftUI】画面の背景色指定
(2021/09/12 更新) 画面の背景色を指定する方法を解説します。 UIKitではUIViewControllerのプロパティで設定しますが、SwiftUIではどうするのでしょうか?