[Xcode/SwiftUI] SwiftUIのpresentationDetentsを学ぶ

シート（モーダル）の高さを柔軟に制御できる機能らしい (iOS16から)。

Contents 非表示

presentationDetentsとは
基本的な使い方
実装例
初期値指定したい時
動的な高さ設定
注意点

presentationDetentsとは

presentationDetentsを使うと、シートの高さを複数の選択肢として設定できて、部分的に表示する高さや全画面表示を簡単に切り替えることが便利になるそう

活用例：

ユーザーに詳細情報を提供するシート。
インタラクティブなフィルタリングやオプション選択画面。
メッセージ入力のようなモーダルビュー。

基本的な使い方

SwiftUIでシートを表示するには、まずsheetモディファイアを使用します。その中でpresentationDetentsを設定することで、表示する高さを制御します。

.sheet(isPresented: $isSheetPresented) {
    ContentView()
        .presentationDetents([.fraction(0.25), .medium, .large])
}

.large: システム定義の全画面高さ。

.fraction(Double): 高さを画面の割合で指定（例: 0.25 = 画面の25%）。

.medium: システム定義の中間高さ。

実装例

import SwiftUI

struct ContentView: View {
    @State private var isSheetPresented = false

    var body: some View {
        Button("Show Sheet") {
            isSheetPresented = true
        }
        .sheet(isPresented: $isSheetPresented) {
            VStack {
                Text("Hello, I'm a sheet!")
                    .font(.title)
                Spacer()
            }
            .padding()
            .presentationDetents([.fraction(0.25), .medium, .large])
        }
    }
}

初期値指定したい時

シートを表示したときの初期高さを設定するには、presentationDetentsにselectionを渡します。

@State private var selectedDetent: PresentationDetent = .medium

.presentationDetents([.medium, .large], selection: $selectedDetent)

このコードでは、シートが初期状態で中間（.medium）の高さで表示され、現在の高さをselectedDetentで追跡可能です

動的な高さ設定

fractionを活用して、画面の高さを柔軟に指定できます。

.presentationDetents([.fraction(0.1), .fraction(0.5), .large])

注意点

対応OS: presentationDetentsはiOS 16以降でのみ使用可能です。
ドラッグ操作: ユーザーはデフォルトでドラッグして高さを変更可能です。固定したい場合は、単一の高さを指定してください。