モーダルビューのSheetの高さをカスタマイズするには？【presentationCompactAdaptation】

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

モーダルビューに.sheetという以下のようなビューがあります。このビューをカスタマイズする方法を紹介します。

sheetの高さを設定する方法
1. sheetの高さを２段階に設定
2. ３段階以上の高さを指定してみる
高さをプログラム中で取得するには？
1. 取得したサイズの表示
まとめ

sheetの高さを設定する方法

sheetの高さを２段階に設定

まずは、presentationCompactAdaptationの基本的な使い方でシートの高さを２段階で設定してみます。
シートの高さはドラッグすると変更することが出来ます。

高さの指定の方法

高さは以下の方法で指定することができます。

large：デフォルトのサイズ、画面上部までの高さ
medium：画面中心部までの高さ
custom：独自のstructを定義して高さを指定
fraction：割合で高さを指定（例：0.5なら画面の半分）
height：数値で高さを指定

３段階以上の高さを指定してみる

次は３段階以上の高さを指定してみます。指定方法においては、上記の指定方法をそれぞれ使用しています。

import SwiftUI

struct presentationDetentsSmp: View {
    @State private var showingModal = false
    
    var body: some View {
        // モーダルビューの表示ボタン
        Button("Show Modal") {
            showingModal = true
        }
        .sheet(isPresented: $showingModal) {
            // モーダルに表示するビュー
            Text("This is a modal view.")
                // 背景が分かりやすいように配色を変更
                .foregroundStyle(.white)
                .presentationBackground(.blue)
                // sheetの高さを２段階に指定
                .presentationDetents([
                    // structで独自に高さを定義
                    .custom(BarDetent.self),
                    // 数値で高さを指定
                    .height(300),
                    // 割合で高さを指定
                    .fraction(0.75),
                    // largeサイズを指定
                    .large
                ])
        }
    }
}

private struct BarDetent: CustomPresentationDetent {
    static func height(in context: Context) -> CGFloat? {
        context.maxDetentValue * 0.1
    }
}

高さをプログラム中で取得するには？

sheetの高さを指定する方法を紹介しましたが、現在設定されている高さを取得する方法もあります。
presentationDetentsのselectionパラメータを指定することで取得できます。

import SwiftUI

struct presentationDetentsSmp: View {
    @State private var showingModal = false
    @State private var settingsDetent = PresentationDetent.medium
    
    var body: some View {
        // モーダルビューの表示ボタン
        Button("Show Modal") {
            showingModal = true
        }
        .sheet(isPresented: $showingModal) {
            // モーダルに表示するビュー
            Text("This is a modal view.")
                // 背景が分かりやすいように配色を変更
                .foregroundStyle(.white)
                .presentationBackground(.blue)
                // sheetの高さを２段階に指定
                .presentationDetents([
                    // structで独自に高さを定義
                    .custom(BarDetent.self),
                    // 数値で高さを指定
                    .height(300),
                    // 割合で高さを指定
                    .fraction(0.75),
                    // largeサイズを指定
                    .large],
                     selection: $settingsDetent)

            if settingsDetent == .custom(BarDetent.self) {
                Text("bar")
            }
            else if settingsDetent == .height(300) {
                Text("small")
            }
            else if settingsDetent == .fraction(0.75) {
                Text("extraLarge")
            }
            else {
                Text("large")
            }
        }
    }
}