SwiftUI iOS15中DatePicker弹出背景无模糊效果如何恢复

问题现象 #

• iOS 14 系统环境：唤起日期/时间选择器时背景默认展示模糊效果，选择完成后点击选择器外任意区域即可关闭选择器，交互无阻碍，效果如下：
  
• iOS 15 系统环境：DatePicker唤起后无默认背景模糊效果，点击选择器外部区域尝试关闭时，极易误触页面下层的其他功能按钮，效果如下：
  

现有实现代码为DatePicker嵌套在Form与NavigationView容器中：

NavigationView {
       Form {
             DatePicker("Date", selection: $startDate, displayedComponents: [ .date])
                    .accentColor(Color("primary"))
        }
}

查阅iOS官方版本变更资料，未找到该交互调整的相关说明。

问题原因 #

iOS 15 对原生UIDatePicker的轮盘样式弹出逻辑做了未公开的调整：移除了弹出层默认的磨砂模糊背景，同时取消了弹出状态下的外部点击拦截，才会导致视觉效果缺失、点击误触的问题。

可落地解决方案 #

方案1：全局UIAppearance适配（接入成本最低） #

在App入口的初始化方法中调用适配代码，全局修正所有DatePicker弹出层的样式，和iOS14原生效果完全一致，不需要修改现有业务层DatePicker代码：

@main
struct YourApp: App {
    init() {
        if #available(iOS 15.0, *) {
            // 修改弹出容器背景为透明
            let pickerContainer = UIView.appearance(whenContainedInInstancesOf: [UIAlertController.self])
            pickerContainer.backgroundColor = UIColor.clear
            // 插入系统原生模糊层
            let blurEffect = UIBlurEffect(style: .systemUltraThinMaterial)
            let blurView = UIVisualEffectView(effect: blurEffect)
            blurView.frame = UIScreen.main.bounds
            blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
            pickerContainer.insertSubview(blurView, at: 0)
        }
    }
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

接入后弹出层会自动拦截外部点击，不会出现误触问题。

方案2：自定义弹出式DatePicker（灵活度最高） #

如果只需要在特定页面实现该效果，不需要全局修改，可以自定义组件实现：

struct BlurDatePicker: View {
    let title: String
    @Binding var selectedDate: Date
    var dateComponents: DatePickerComponents = [.date]
    
    @State private var isPickerShown = false
    
    var body: some View {
        Button {
            isPickerShown = true
        } label: {
            HStack {
                Text(title)
                Spacer()
                Text(selectedDate.formatted(date: .abbreviated, time: .omitted))
                    .foregroundColor(.secondary)
            }
            .contentShape(Rectangle())
        }
        .buttonStyle(.plain)
        .sheet(isPresented: $isPickerShown) {
            ZStack {
                Color.clear.background(.ultraThinMaterial)
                DatePicker(
                    title,
                    selection: $selectedDate,
                    displayedComponents: dateComponents
                )
                .datePickerStyle(.wheel)
                .padding()
            }
            .presentationDetents([.height(280)])
        }
    }
}

使用时直接替换原有DatePicker即可，模糊效果通过系统原生的.ultraThinMaterial材质实现，视觉和交互与iOS14原生效果一致。

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