SwiftUI自定义弹出的Sheet的尺寸

在 SwiftUI 中，presentationDetents 是用于自定义弹出的 Sheet 的尺寸的修饰符。通过这个修饰符，可以指定 Sheet 的高度，并允许用户在不同高度之间切换。

基础语法

.sheet(isPresented: $isPresented) {
    Text("This is a sheet")
        .presentationDetents([.medium, .large])
}

.presentationDetents([.medium, .large]): 设置弹出的 Sheet 可以在 中等高度 和 全屏高度 之间切换。

.medium 和 .large 是预定义的高度类型。

可用的 Detent 类型

1、预定义高度

.fraction(Double)：以屏幕高度的百分比定义弹窗高度（例如，.fraction(0.5) 表示 50% 的屏幕高度）。

.height(CGFloat)：使用绝对值指定高度（例如，.height(300) 表示弹窗高度为 300 点）。

.medium：表示一个系统定义的中等高度。

.large：表示弹窗填充整个屏幕高度。

2、自定义高度

如果预定义的高度无法满足需求，可以使用 .fraction 或 .height 进行更细粒度的控制。

完整示例

使用系统预定义高度

struct ContentView: View {
    @State private var isSheetPresented = false
    
    var body: some View {
        Button("Show Sheet") {
            isSheetPresented = true
        }
        .sheet(isPresented: $isSheetPresented) {
            VStack {
                Text("This is a sheet")
                    .font(.title)
                Text("Swipe to resize")
            }
            .presentationDetents([.medium, .large])
        }
    }
}

使用自定义高度

struct ContentView: View {
    @State private var isSheetPresented = false
    
    var body: some View {
        Button("Show Custom Sheet") {
            isSheetPresented = true
        }
        .sheet(isPresented: $isSheetPresented) {
            VStack {
                Text("Custom Height Sheet")
                    .font(.title)
            }
            .presentationDetents([.height(200), .fraction(0.7)])
        }
    }
}

指定初始高度

可以使用 presentationDetents 的 Set 来指定多个高度，并使用 .presentationDragIndicator 控制是否显示拖动指示器。

设置初始高度

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

$selectedDetent 是一个绑定值，用于指定当前的高度。

示例：

struct ContentView: View {
    @State private var selectedDetent: PresentationDetent = .medium
    @State private var isSheetPresented = false
    var body: some View {
        Button("Show Custom Sheet") {
            isSheetPresented = true
        }
        .sheet(isPresented: $isSheetPresented) {
            VStack {
                Text("Sheet with Initial Size")
            }
            .presentationDetents([.medium, .large], selection: $selectedDetent)
        }
    }
}

拖动指示器

.presentationDragIndicator(.visible) // 默认值，显示拖动指示器
.presentationDragIndicator(.hidden) // 隐藏拖动指示器

如果presentationDetents中只有一个值，默认也会因此拖动指示器：

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

适用平台

iOS 16+

iPadOS 16+

macOS 13+

总结

presentationDetents 是 SwiftUI 中一个强大且灵活的 API，可以实现多种弹窗高度和交互方式。通过结合 Set 和 PresentationDetent 类型，可以轻松创建符合设计需求的自定义 Sheet。