如何在SwiftUI预览中以模态表单（Modal Sheet）展示视图？

当然可以实现，你可以通过两种方式让SwiftUI预览还原模态表单的非全屏、避开刘海/灵动岛的真实效果：

方式一：直接模拟模态表单布局 #

直接在预览中构建模拟容器，还原模态表单的视觉样式和布局特性：

// 你的模态表单视图
struct ModalSheetView: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("模态表单内容")
                .font(.title)
            Button("关闭") {}
        }
        .padding()
        .background(Color.white)
        .cornerRadius(16)
        .padding(.horizontal)
    }
}

// 预览设置
struct ModalSheetView_Previews: PreviewProvider {
    static var previews: some View {
        ZStack {
            // 模拟原页面的背景遮罩
            Color.gray.opacity(0.3)
                .ignoresSafeArea()
            
            // 模拟模态表单的展示
            ModalSheetView()
                .presentationDetents([.medium]) // 指定非全屏高度，比如中等高度
                .presentationDragIndicator(.visible) // 显示拖拽指示器
                .presentationBackground(.clear)
        }
    }
}

方式二：用真实的sheet触发逻辑模拟 #

这种方式更贴近实际的弹出流程，通过状态变量控制表单的展示：

struct ModalSheetView_Previews: PreviewProvider {
    static var previews: some View {
        PreviewHost()
    }
    
    // 模拟触发弹出的宿主视图
    private struct PreviewHost: View {
        @State private var showSheet = true
        
        var body: some View {
            // 宿主页面内容（预览中默认隐藏，直接展示弹出状态）
            Color.gray.opacity(0.3)
                .ignoresSafeArea()
                .sheet(isPresented: $showSheet) {
                    ModalSheetView()
                        .presentationDetents([.medium])
                        .presentationDragIndicator(.visible)
                }
        }
    }
}

关键细节说明 #

• 使用presentationDetents可以精确控制模态表单的高度，除了.medium，还可以用.fraction(0.6)自定义占屏幕的比例，或者.height(400)指定固定高度
• 模态表单默认会自动避开刘海/灵动岛的顶部区域，不需要额外设置安全区域相关属性
• 添加presentationDragIndicator可以还原原生模态表单的拖拽交互指示器

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