Viewをモーダル表示にするfullScreenCoverの使い方を解説します。
iOS14から使えるようになったモディファイアで、カードを重ねたような表示になるシート（sheet）とは異なり、画面全体を覆うモーダルViewを表示します。
環境
この記事の情報は次のバージョンで動作確認しています。
【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モディファイアを使用してください。
あわせて読みたい記事
