SwiftUI：如何设置Sheet初始高度同时保留拖拽功能

需求 #

实现一个Sheet，要求：

• 初始显示特定自定义高度（如200）
• 支持用户拖拽切换至.medium和.large高度
• Sheet上的按钮可切换至另一自定义高度（如60），操作后仍保留拖拽功能

问题分析 #

直接使用.presentationDetents([.height(40), .medium, .large])无法设置初始自定义高度；仅设置单个自定义高度会丢失拖拽切换能力。核心问题是未绑定状态变量控制当前激活的高度档位，同时未将所有允许的高度纳入档位列表。

解决方案 #

使用presentationDetents(_:selection:)方法，同时：

1. 在档位列表中包含所有允许的高度（两个自定义高度、.medium、.large）
2. 绑定状态变量控制当前选中的档位，通过该变量设置初始高度，按钮点击时切换变量值即可改变Sheet高度

修改后的代码 #

import SwiftUI

struct ContentView: View {
    // 初始设置为200的自定义高度
    @State private var selectedDetent: PresentationDetent = .height(200)
    
    var body: some View {
        Text("Hello")
            .sheet(isPresented: .constant(true)) {
                Button {
                    // 切换选中的高度档位
                    selectedDetent = selectedDetent == .height(60) ? .height(200) : .height(60)
                    print("当前选中高度:", selectedDetent)
                } label: {
                    Image(systemName: "button.programmable")
                        .font(.largeTitle)
                        .frame(maxWidth: .infinity, alignment: .center)
                }
                // 定义所有允许的高度档位，并绑定选中状态
                .presentationDetents([.height(60), .height(200), .medium, .large], selection: $selectedDetent)
                .interactiveDismissDisabled()
                .presentationDragIndicator(.visible)
            }
    }
}

#Preview {
    ContentView()
}

说明 #

• selectedDetent状态变量控制当前Sheet的高度，初始值设为.height(200)即可实现初始高度要求
• presentationDetents列表包含了所有可切换的高度档位，确保拖拽功能正常
• 按钮点击时直接切换selectedDetent的值，Sheet会自动响应高度变化，且不影响拖拽功能

内容的提问来源于stack exchange，提问作者Champagne777