全画面表示されるモーダルビュー fullScreenCoverの使い方

この記事は約6分で読めます。
  • iOS:14.0以上
  • XCode(当サイトの環境):15.0.1

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ビューも合わせて使用方法を確認してみてください。

タイトルとURLをコピーしました