SwiftUI compact DatePicker收起时触发外部触控事件如何解决？

问题根因 #

系统默认compact样式的DatePicker弹出的日历面板属于非模态临时弹出层，本身不具备下层交互阻断能力，因此点击面板外区域时，触控事件会同时触发日历收起逻辑和下层对应位置控件的点击事件。

方案1：添加交互遮罩复用原生样式 #

该方案完全保留系统compact DatePicker的原有视觉和交互逻辑，仅通过透明遮罩拦截下层事件实现模态效果，代码改动最小。
实现代码如下：

import SwiftUI
import Combine

struct DatePickerView: View {
    @State private var date = Date()
    @State private var components: DatePickerComponents = .date
    @State private var isCalendarExpanded = false
    let name = "选择日期"
    
    var body: some View {
        ZStack {
            // 此处放置你的原有页面所有内容
            VStack {
                Button("测试下层按钮") {
                    print("下层按钮被触发")
                }
            }
            
            // 日历展开时显示的全屏透明遮罩，拦截下层点击
            if isCalendarExpanded {
                Color.clear
                    .contentShape(Rectangle())
                    .ignoresSafeArea()
                    .onTapGesture {
                        isCalendarExpanded = false
                    }
            }
            
            // 原有的DatePicker声明
            DatePicker(
                name,
                selection: $date,
                displayedComponents: components
            )
            .labelsHidden()
            .onTapGesture {
                isCalendarExpanded = true
            }
            // 同步异常场景下的状态，避免状态不一致
            .onReceive(NotificationCenter.default.publisher(for: UIApplication.willResignActiveNotification)) { _ in
                isCalendarExpanded = false
            }
        }
    }
}

方案2：自定义模态弹出日历（稳定性更高） #

直接用系统原生模态容器承载日历视图，天然具备模态交互的事件阻断能力，完全杜绝事件透传问题，还可灵活自定义弹窗样式。
实现代码如下：

import SwiftUI

struct CustomDatePickerView: View {
    @State private var date = Date()
    @State private var components: DatePickerComponents = .date
    @State private var showDatePicker = false
    let name = "选择日期"
    
    var body: some View {
        // 触发弹窗的按钮，样式可自定义为和系统compact DatePicker完全一致
        Button {
            showDatePicker = true
        } label: {
            Text(date.formatted(date: .abbreviated, time: components.contains(.hourAndMinute) ? .short : .omitted))
                .padding(.horizontal, 14)
                .padding(.vertical, 7)
                .background(Color(UIColor.secondarySystemBackground))
                .cornerRadius(8)
        }
        .sheet(isPresented: $showDatePicker) {
            NavigationStack { // iOS 15及以下改为NavigationView即可
                DatePicker(
                    name,
                    selection: $date,
                    displayedComponents: components
                )
                .datePickerStyle(.graphical)
                .labelsHidden()
                .padding()
                .navigationTitle(name)
                .navigationBarTitleDisplayMode(.inline)
                .toolbar {
                    ToolbarItem(placement: .confirmationAction) {
                        Button("完成") {
                            showDatePicker = false
                        }
                    }
                }
            }
            .presentationDetents([.medium]) // 半屏显示，和系统原生日历视觉效果对齐
            .presentationDragIndicator(.visible)
        }
    }
}

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