
fullScreenCoverは、全画面モーダルビューを表示するためのビューモディファイアです。fullScreenCoverには2つの宣言方法があります。
fullScreenCover(isPresented:onDismiss:content:)fullScreenCover(item:onDismiss:content:)
宣言による違い
fullScreenCover(isPresented:onDismiss:content:)とfullScreenCover(item:onDismiss:content:)は、前者はBool値のバインディングに基づいてモーダルを制御し、後者は特定のIdentifiableなアイテムに基づいて動的にモーダルを表示します。
前者は単一の条件での使用に適しており、後者はリストからの選択など複数の可能性がある場合に便利です。
どちらもonDismissで閉じた際のアクションを定義でき、contentで表示内容をカスタマイズします。
fullScreenCover(isPresented:onDismiss:content:)
isPresentedパラメータを用いて表示状態を管理し、contentクロージャで表示するビューを定義します。
これにより、アプリ内で重要なアクションや情報をフルスクリーンで提示したりすることが可能になります。
例えば、ウェルカム画面やチュートリアル、重要な通知を全画面で表示する場合に有用です。
基本的な使用法
isPresentedの状態がtrueになるとモーダルが表示され、falseになると閉じます。
サンプルコード
サンプルコードは、sheetの使い方とほぼ同じです。
import SwiftUI
struct fullScreenCoverSmp: View {
@State private var showingModal = false
@State private var count = 0
var body: some View {
Button("Show Full Screen") {
showingModal = true
}
.fullScreenCover(isPresented: $showingModal, onDismiss: {
// 閉じる時のアクション
count += 1
}) {
// モーダルに表示するビュー
Text("This is a modal view.")
.presentationCompactAdaptation(.none)
// モーダルビューを閉じるボタン
Button(action: {
showingModal = false
}) {
Label("Close", systemImage: "xmark.circle.fill")
.labelStyle(.iconOnly)
}
}
Text("Close Count:\(count)")
}
}

fullScreenCover(item:onDismiss:content:)
fullScreenCover(item:onDismiss:content:)は、特定のオプショナル値の変更を監視し、その値がnilでない場合にフルスクリーンモーダルビューを表示します。itemにはオプショナルな値をバインディングし、contentクロージャで表示するビューを定義します。
この方式を使用すると、リストから選択されたアイテムの詳細をフルスクリーンで表示するなど、動的なコンテンツを扱う場合に便利です。
onDismissクロージャはモーダルが閉じたときに実行され、状態をリセットするなどのクリーンアップ処理を行うのに使用できます。
サンプルコード
以下に基本的な使用例を示します。
import SwiftUI
struct fullScreenCoverSmp: View {
@State private var selectedUser: fullScreenCoverUser? = nil
let users = [fullScreenCoverUser(name: "Alice"), fullScreenCoverUser(name: "Bob")]
@State private var count = 0
var body: some View {
List(users) { user in
Button(user.name) {
selectedUser = user
}
}
.fullScreenCover(item: $selectedUser,onDismiss: didDismiss) { selecteduser in
fullScreenCoverDetailSmp(user: selecteduser)
}
Text("\(count)")
}
func didDismiss() {
// 画面を閉じた時のアクション
count += 1
}
}
struct fullScreenCoverUser: Identifiable {
let id = UUID()
let name: String
}
struct fullScreenCoverDetailSmp: View {
@Environment(\.dismiss) var dismiss
let user: fullScreenCoverUser
var body: some View {
Text("Hello, \(user.name)!")
Button("Close") {
dismiss()
}
}
}fullScreenCover(item:onDismiss:content:)を使用してフルスクリーンの詳細ビューを表示します。
この例では、Identifiableプロトコルに準拠したItem型のオプショナルなインスタンスを監視しています。
選択されたアイテムがnilでない場合にフルスクリーンカバーが表示され、閉じるボタンをタップするとビューが閉じます。
まとめ
本記事ではモーダルビューの表示で使用する.fullScreenCoverについて以下2つのパターンについて説明しました。
- フラグによる制御
fullScreenCover(isPresented:~) - プロパティを渡して制御
fullScreenCover(item:~)
基本的にはsheetビューと同様の方法で使用することが出来ます。よければ.sheetビューも合わせて使用方法を確認してみてください。


