如何检测SwiftUI DatePicker日期选择器的关闭事件？

要在组件内部捕获DatePicker外部点击关闭的事件，同时处理选择日期后的自动关闭，可以通过以下修改实现：

修改后的完整代码 #

import SwiftUI

extension Date {
    func toString(_ format: String) -> String {
        let formatter = DateFormatter()
        formatter.dateFormat = format
        return formatter.string(from: self)
    }
}

struct DatePickerComponent: View {
    @State private var date = Date()
    @State private var isOpened = false

    public init() {
        self.date = Date()
        self.isOpened = false
    }

    public var body: some View {
        ZStack {
            // 外部点击捕获层：仅当DatePicker展开时激活
            if isOpened {
                Color.clear
                    .contentShape(Rectangle())
                    .onTapGesture {
                        isOpened = false
                        print("DatePicker closed by tapping outside")
                        // 这里添加关闭后的自定义视图更新逻辑
                    }
            }
            
            HStack() {
                VStack(alignment: .leading, spacing: 0) {
                    Text("Start date")
                    Text(date.toString("dd-MM-yyyy")) // 修正日期格式：MM代表月份，mm代表分钟
                }
                Image(isOpened ? .icnClose : .icnCalendar)
                    .renderingMode(.template)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 24, height: 24)
            }
            .overlay {
                DatePicker(
                    "",
                    selection: $date,
                    displayedComponents: [.date])
                .datePickerStyle(.compact)
                .labelsHidden()
                .blendMode(.destinationOver)
                .onTapGesture {
                    isOpened.toggle()
                    print("DatePicker tapped, state: \(isOpened ? "opened" : "closed")")
                }
                .onChange(of: date) { _ in
                    // 用户选择日期后，DatePicker自动关闭，同步更新状态
                    guard isOpened else { return }
                    isOpened = false
                    print("DatePicker closed by selecting date")
                    // 这里添加选择日期后的视图更新逻辑
                }
            }
        }
    }
}

关键实现细节 #

• 外部点击捕获：通过ZStack添加全屏透明背景层，仅在isOpened为true时显示。contentShape(Rectangle())确保透明区域能响应点击事件，点击后将isOpened设为false。
• 内部点击切换状态：在DatePicker的onTapGesture中切换isOpened，控制图标和透明层的显示/隐藏。
• 选择日期后同步状态：利用onChange(of: date)监听日期变化，当用户选择日期后自动关闭DatePicker，同步更新isOpened状态。
• 完全内部实现：所有逻辑都封装在组件内部，使用时无需在外部视图添加额外代码。

注意事项 #

• 修正了原代码中的日期格式错误：dd-mm-yyy里的mm代表分钟、yyy是三位年份，改为标准的dd-MM-yyyy。
• 确保项目中存在icnClose和icnCalendar这两个图片资源。

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