【モーダルビューの表示方法】シート（.sheet）の使い方について

SwiftUIの”.sheet“を使用すると、条件に応じてモーダルビューを表示できす。宣言には2つの方法があります。

sheet(isPresented:onDismiss:content:)：Bool値をバインディングしてモーダルの表示状態を管理し、contentで表示するビューを指定します
sheet(item:onDismiss:content:)：特定のオプショナル型の値を監視し、値がnilでない場合にモーダルを表示します。これにより、選択されたアイテムに基づいて異なる内容のモーダルを表示できます

iOS：13.0以上
XCode（当サイトの環境）：15.0.1

フラグによる制御｜sheet(isPresented:~)の解説
1. 使用の際のポイント
2. サンプルコード
プロパティを渡して制御｜sheet(item:~)の解説
1. サンプルコード
2. サンプルコードのポイント
まとめ

フラグによる制御｜sheet(isPresented:~)の解説

.sheet(isPresented:onDismiss:content:)モディファイアは、Bool型のバインディングを使用して、条件に基づいてモーダルビューを表示します。

使用の際のポイント

ユーザーのアクションに応じてフィードバックを提供するフォーム、詳細画面、またはアラートを表示する際に便利です。

isPresented

isPresentedにtrueが設定されるとモーダルが表示され、falseに設定されると閉じます。

onDismiss

onDismissはモーダルが閉じられるときに実行されるクロージャで、クリーンアップ作業などに使用できます。

content

contentクロージャ内でモーダルに表示するビューを定義します。

サンプルコード

以下は、.sheet(isPresented:onDismiss:content:)を使用する具体例です。

ボタンをタップすると、isPresentedがtrueに設定され、モーダルビューが表示されます。
モーダルは簡単なテキストメッセージを含むビューです。
モーダルを閉じると、onDismissクロージャが呼ばれ、画面を閉じた回数をカウントします。

import SwiftUI

struct SheetSmp: View {
    @State private var showingModal = false
    @State private var count = 0
    
    var body: some View {
        // モーダルビューの表示ボタン
        Button("Show Modal") {
            showingModal = true
        }
        .sheet(isPresented: $showingModal, onDismiss: {
            // 閉じる時のアクション
            count += 1
        }) {
            // モーダルに表示するビュー
            Text("This is a modal view.")
            
            // モーダルビューを閉じるボタン
            Button(action: {
                showingModal = false
            }) {
                Label("Close", systemImage: "xmark.circle.fill")
                    .labelStyle(.iconOnly)
            }
        }
        
        Text("\(count)")
    }
}

プロパティを渡して制御｜sheet(item:~)の解説

.sheet(item:onDismiss:content:)を使用すると、モーダルプレゼンテーションを条件付きで表示できます。
itemパラメータにはオプショナルな値をバインディングし、この値がnilでない場合にモーダルが表示されます。itemがnilになるとモーダルが閉じます。

itemにバインドされた変数を更新することで、モーダルの表示と非表示をプログラムで制御できます。各モーダルビューには、表示するコンテンツを提供するクロージャが必要です。このクロージャは、itemから渡された値にアクセスできるので、ダイナミックなコンテンツの表示に便利です。

サンプルコード

選択可能なアイテムリストからアイテムを選択し、そのアイテムの詳細をモーダルビューで表示する場合です。
@State変数をアイテムの選択状態にバインドし、ユーザーがアイテムを選択するとモーダルが表示されます。モーダルを閉じると、オプショナルなonDismissクロージャが呼び出され処理を行うとともに、選択状態をリセットします。

なお、onDismissは省略することも可能です。

import SwiftUI

struct SheetSmp: View {
    @State private var selectedUser: User? = nil
    let users = [User(name: "Alice"), User(name: "Bob")]
    @State private var count = 0
    
    var body: some View {
        List(users) { user in
            Button(user.name) {
                selectedUser = user
            }
        }
        .sheet(item: $selectedUser,onDismiss: didDismiss) { user in
            SheetDetailSmp(user: user)
        }
        
        Text("\(count)")
    }
    func didDismiss() {
        // 画面を閉じた時のアクション
        count += 1
    }
}

struct User: Identifiable {
    let id = UUID()
    let name: String
}

struct SheetDetailSmp: View {
    let user: User

    var body: some View {
        Text("Hello, \(user.name)!")
    }
}

サンプルコードのポイント

selectedUserはモーダルを表示するために選択されるオプショナルなアイテムです。リストで表示された名前を選択すると、selectedUserに選択されたユーザのデータが格納されモーダルビューを表示します。すると表示されたモーダルビューには選択した名前が表示されます。
SheetDetailSmpは選択されたアイテムの詳細を表示するモーダルビューです。

画面を閉じる際に”didDismiss”が動作し、画面を閉じた回数をカウントしており、画面下のカウンタが増加します。