如何修改SwiftUI中iOS DatePicker按钮的大小、形状与颜色

当然可以修改，下面是几种实用的实现方式，覆盖从简单调整到完全自定义的需求：

方法1：通过修饰符快速调整基础样式 #

直接利用SwiftUI的视图修饰符，就能快速修改DatePicker的大小、背景色、圆角和文字颜色，同时保证点击交互正常。

import SwiftUI

struct Content: View {
    @State var date: Date = Date()
    
    var body: some View {
        Form {
            Section {
                DatePicker("Pick a date", selection: $date)
                    // 设置按钮的固定宽高
                    .frame(width: 280, height: 65)
                    // 自定义背景色与圆角形状
                    .background(Color.blue.opacity(0.15))
                    .cornerRadius(16)
                    // 修改文字与图标颜色
                    .foregroundColor(.blue)
                    // 确保整个自定义区域都能触发点击
                    .contentShape(Rectangle())
            }
        }
    }
}

#Preview {
    Content()
}

方法2：自定义标签实现灵活布局 #

如果需要更个性化的排版（比如把标题和选中日期分开显示），可以给DatePicker传入自定义的Label视图，完全控制按钮的外观布局。

import SwiftUI

struct Content: View {
    @State var date: Date = Date()
    // 日期格式化器，用来展示选中的日期
    private let dateFormatter: DateFormatter = {
        let formatter = DateFormatter()
        formatter.dateStyle = .medium
        return formatter
    }()
    
    var body: some View {
        Form {
            Section {
                DatePicker(selection: $date) {
                    HStack {
                        Text("选择日期")
                            .font(.headline)
                        Spacer()
                        Text(dateFormatter.string(from: date))
                            .foregroundColor(.secondary)
                            .font(.subheadline)
                    }
                    .padding(.vertical, 12)
                    .padding(.horizontal, 20)
                    .background(Color.green.opacity(0.1))
                    .cornerRadius(12)
                }
            }
        }
    }
}

#Preview {
    Content()
}

方法3：基于UIKit完全自定义（极致样式控制） #

如果需要完全脱离SwiftUI默认的DatePicker样式，可以用UIViewRepresentable包装UIKit的UIDatePicker，实现100%自定义的外观和交互逻辑。

import SwiftUI
import UIKit

struct CustomDatePicker: UIViewRepresentable {
    @Binding var date: Date
    let placeholder: String
    
    func makeUIView(context: Context) -> UITextField {
        let textField = UITextField()
        textField.placeholder = placeholder
        textField.backgroundColor = .systemGray6
        textField.textColor = .systemRed
        textField.font = .systemFont(ofSize: 16, weight: .medium)
        textField.layer.cornerRadius = 12
        textField.clipsToBounds = true
        textField.padding = UIEdgeInsets(top: 15, left: 15, bottom: 15, right: 15)
        
        // 设置日期选择器
        let datePicker = UIDatePicker()
        datePicker.datePickerMode = .date
        datePicker.addTarget(context.coordinator, action: #selector(Coordinator.dateChanged(_:)), for: .valueChanged)
        textField.inputView = datePicker
        
        // 添加工具栏完成按钮
        let toolbar = UIToolbar()
        toolbar.sizeToFit()
        let doneBtn = UIBarButtonItem(title: "完成", style: .done, target: context.coordinator, action: #selector(Coordinator.doneTapped))
        toolbar.items = [UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil), doneBtn]
        textField.inputAccessoryView = toolbar
        
        return textField
    }
    
    func updateUIView(_ uiView: UITextField, context: Context) {
        let formatter = DateFormatter()
        formatter.dateStyle = .medium
        uiView.text = formatter.string(from: date)
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject {
        let parent: CustomDatePicker
        
        init(_ parent: CustomDatePicker) {
            self.parent = parent
        }
        
        @objc func dateChanged(_ picker: UIDatePicker) {
            parent.date = picker.date
        }
        
        @objc func doneTapped() {
            parent.makeUIView(context: Context()).resignFirstResponder()
        }
    }
}

// 使用示例
struct Content: View {
    @State var date: Date = Date()
    
    var body: some View {
        Form {
            Section {
                CustomDatePicker(date: $date, placeholder: "请选择日期")
            }
        }
    }
}

#Preview {
    Content()
}

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