SwiftUI中无需点击手势检测DatePicker开闭并处理父视图边框

要实现点击DatePicker时给父视图加边框，关闭时恢复样式，关键是精准捕获DatePicker的弹出（开始编辑）和关闭（结束编辑）事件——原来的onTapGesture只能检测点击，根本抓不到关闭操作，下面给你两种实用方案：

方案一：封装UIKit版DatePicker（全iOS版本兼容） #

把UIKit的UIDatePicker用UIViewRepresentable包成SwiftUI组件，利用它的事件监听直接捕获编辑开始和结束，不管用户改没改日期，关闭时都能触发状态变化：

import SwiftUI

// 自定义包装的DatePicker组件
struct CustomDatePicker: UIViewRepresentable {
    @Binding var selection: Date
    @Binding var isEditing: Bool
    let displayedComponents: UIDatePicker.Component
    
    func makeUIView(context: Context) -> UIDatePicker {
        let datePicker = UIDatePicker()
        datePicker.date = selection
        datePicker.datePickerMode = .date // 对应SwiftUI的.date组件
        // 绑定事件监听
        datePicker.addTarget(context.coordinator, action: #selector(Coordinator.dateChanged(_:)), for: .valueChanged)
        datePicker.addTarget(context.coordinator, action: #selector(Coordinator.didBeginEditing(_:)), for: .editingDidBegin)
        datePicker.addTarget(context.coordinator, action: #selector(Coordinator.didEndEditing(_:)), for: .editingDidEnd)
        return datePicker
    }
    
    func updateUIView(_ uiView: UIDatePicker, context: Context) {
        uiView.date = selection
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject {
        let parent: CustomDatePicker
        
        init(_ parent: CustomDatePicker) {
            self.parent = parent
        }
        
        // 日期变化时更新绑定值
        @objc func dateChanged(_ datePicker: UIDatePicker) {
            parent.selection = datePicker.date
        }
        
        // 开始编辑（弹出日历）
        @objc func didBeginEditing(_ datePicker: UIDatePicker) {
            parent.isEditing = true
        }
        
        // 结束编辑（关闭日历）
        @objc func didEndEditing(_ datePicker: UIDatePicker) {
            parent.isEditing = false
        }
    }
}

// 父视图使用示例
struct ParentView: View {
    @State private var selectedDate = Date()
    @State private var isFieldEditing = false
    
    var body: some View {
        VStack {
            HStack {
                Text("选择日期")
                CustomDatePicker(selection: $selectedDate, isEditing: $isFieldEditing, displayedComponents: .date)
                    .labelsHidden()
                    .padding(.trailing, 8)
                    .frame(alignment: .leading)
                    .colorMultiply(AppColors.textNavy100Color)
                    .accentColor(AppColors.textNavy100Color)
            }
            .padding()
            // 根据编辑状态切换边框
            .border(isFieldEditing ? AppColors.textNavy100Color : .clear, width: 1)
        }
    }
}

方案二：用SwiftUI的FocusState（iOS 15+专属） #

如果只需要支持iOS 15及以上版本，直接用@FocusState追踪DatePicker的焦点状态就行——焦点获取对应日历弹出，焦点丢失对应日历关闭，代码更简洁：

struct ParentView: View {
    @State private var datePicker = Date()
    @FocusState private var isDatePickerFocused: Bool
    
    var body: some View {
        VStack {
            HStack {
                Text("选择日期")
                DatePicker("", selection: $datePicker, displayedComponents: .date)
                    .labelsHidden()
                    .padding(.trailing, 8)
                    .frame(alignment: .leading)
                    .colorMultiply(AppColors.textNavy100Color)
                    .accentColor(AppColors.textNavy100Color)
                    .focused($isDatePickerFocused) // 绑定焦点状态
            }
            .padding()
            .border(isDatePickerFocused ? AppColors.textNavy100Color : .clear, width: 1)
            .onChange(of: isDatePickerFocused) { newValue in
                // 可选：这里可以加状态变化的额外逻辑
                print(newValue ? "日历弹出来了" : "日历关闭了")
            }
        }
    }
}

方案怎么选？ #

• 方案一：通吃所有iOS版本，不管用户点空白关闭还是选完日期关闭，都能准确触发状态切换，稳得一批。
• 方案二：代码少，逻辑简单，但只支持iOS 15及以上，适合不需要兼容老版本的项目。

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