SwiftUI实现：拉起Sheet时保持背景地图视图全屏不淡出

问题示意图：拉起Sheet时，背景地图视图出现淡出效果，而Apple Maps中背景地图保持全屏清晰显示

要实现类似Apple Maps的效果，让背景地图在Sheet拉起时保持全屏显示，核心是取消系统Sheet默认的背景变暗/模糊效果，或者直接自定义可拖动的底部视图。以下是两种可行方案：

方案1：配置系统Sheet的展示样式（iOS 16+） #

利用SwiftUI 3.0+的Sheet配置API，禁用背景变暗并设置透明背景：

struct MapView: View {
    @State private var isSheetPresented = false
    
    var body: some View {
        // 你的地图视图
        Map()
            .sheet(isPresented: $isSheetPresented) {
                // Sheet内容视图
                SheetContentView()
                    .presentationDetents([.medium, .large])
                    .presentationBackground(.clear) // 取消Sheet默认背景
                    .presentationBackgroundInteraction(.enabled(upThrough: .medium)) // 允许背景交互
                    .presentationCornerRadius(16) // 保持圆角样式
            }
            .onTapGesture {
                isSheetPresented = true
            }
    }
}

struct SheetContentView: View {
    var body: some View {
        ZStack {
            Color.white
            Text("可拖动的Sheet内容")
                .font(.title)
        }
    }
}

关键配置说明：

• presentationBackground(.clear)：移除Sheet默认的半透明背景层
• presentationBackgroundInteraction(.enabled(upThrough: .medium))：允许Sheet在中等高度及以下时，用户仍可与背景地图交互
• presentationDetents：定义Sheet的可停留高度，模拟Apple Maps的多级拖动效果

方案2：自定义底部可拖动视图（兼容iOS 15及以下） #

如果需要兼容更低版本，直接用ZStack和DragGesture实现自定义Sheet，完全控制背景显示逻辑：

struct MapView: View {
    @State private var sheetOffset: CGFloat = UIScreen.main.bounds.height
    // 定义Sheet的最小停留高度（比如屏幕的1/3）
    private let minSheetHeight = UIScreen.main.bounds.height / 3
    
    var body: some View {
        ZStack(alignment: .bottom) {
            // 背景地图视图
            Map()
            
            // 自定义可拖动Sheet
            SheetContentView()
                .frame(height: UIScreen.main.bounds.height)
                .offset(y: sheetOffset)
                .gesture(
                    DragGesture()
                        .onChanged { value in
                            // 限制拖动范围，避免Sheet完全超出屏幕
                            sheetOffset = max(value.translation.y, minSheetHeight - UIScreen.main.bounds.height)
                        }
                        .onEnded { value in
                            // 拖动结束后自动吸附到最近的停留点
                            let snapToFull = value.translation.y > 50
                            sheetOffset = snapToFull ? UIScreen.main.bounds.height : minSheetHeight - UIScreen.main.bounds.height
                        }
                )
        }
        .ignoresSafeArea()
    }
}

这种方式下，背景地图始终全屏显示，完全不受Sheet的影响，所有交互逻辑都由自己控制，灵活性更高。

补充说明 #

如果使用系统Sheet，还可以通过UIViewControllerRepresentable包装，直接修改底层控制器的背景变暗透明度：

extension View {
    func disableSheetBackgroundDimming() -> some View {
        self.background(
            UIViewControllerRepresentable { vc in
                vc.parent?.presentationController?.backgroundDimmingView?.alpha = 0
            }
        )
    }
}

// 使用时在Sheet内容视图添加：
SheetContentView()
    .disableSheetBackgroundDimming()

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