macOS/SwiftUI下移除DatePicker内置边框的方法

你在美化DatePicker时添加了自定义圆角边框，但控件自带的内置边框无法通过常规的.background或.border修饰符移除，导致出现双层边框问题。以下是两种可行的解决方法：

方案1：自定义UIViewRepresentable包装UIDatePicker #

通过直接使用UIKit的UIDatePicker，完全控制样式，彻底避免系统默认边框：

struct CustomDatePicker: UIViewRepresentable {
    @Binding var selectedDate: Date
    let maximumDate: Date
    
    func makeUIView(context: Context) -> UIDatePicker {
        let datePicker = UIDatePicker()
        datePicker.datePickerMode = .date
        datePicker.maximumDate = maximumDate
        datePicker.preferredDatePickerStyle = .compact
        datePicker.addTarget(context.coordinator, action: #selector(Coordinator.dateChanged(_:)), for: .valueChanged)
        // 移除默认边框
        datePicker.borderStyle = .none
        return datePicker
    }
    
    func updateUIView(_ uiView: UIDatePicker, context: Context) {
        uiView.date = selectedDate
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject {
        let parent: CustomDatePicker
        
        init(_ parent: CustomDatePicker) {
            self.parent = parent
        }
        
        @objc func dateChanged(_ sender: UIDatePicker) {
            parent.selectedDate = sender.date
        }
    }
}

在你的视图中替换原DatePicker使用：

VStack(alignment: .leading, spacing: 2) {
    Text("Update Date")
        .font(.body)
        .foregroundColor(.secondary)
                                
    CustomDatePicker(selectedDate: $caseUpdates[index].updateDate, maximumDate: Date())
        .frame(width: 120, height: 32)
        .overlay(RoundedRectangle(cornerRadius: 4).stroke(Color.gray, lineWidth: 1))
}

方案2：使用Introspect库修改底层控件 #

如果不想自定义包装器，可借助第三方库Introspect直接访问DatePicker底层的UIKit控件，移除边框：

1. 先通过Swift Package Manager添加Introspect依赖
2. 使用以下代码：

import Introspect

// ...

DatePicker("", selection: $caseUpdates[index].updateDate, in: ...Date(), displayedComponents: .date)
    .labelsHidden()
    .datePickerStyle(.compact) // 明确使用compact样式，避免自动切换导致的问题
    .frame(width: 120, alignment: .leading)
    .frame(height: 32)
    .introspect(.datePicker, on: .iOS(.v14, .v15, .v16, .v17)) { uiDatePicker in
        // 找到底层的UITextField并移除边框
        if let textField = uiDatePicker.subviews.first(where: { $0 is UITextField }) as? UITextField {
            textField.borderStyle = .none
        }
    }
    .overlay(RoundedRectangle(cornerRadius: 4).stroke(Color.gray, lineWidth: 1))

注意事项 #

• 建议明确指定.datePickerStyle(.compact)，避免.automatic在不同iOS版本/设备上的样式差异
• SwiftUI的DatePicker内置边框属于底层UIKit控件的属性，无法通过纯SwiftUI修饰符直接移除，必须通过UIKit层面修改

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