SwiftUI中能否修改DatePicker选中元素的背景颜色?
在SwiftUI中修改Wheel样式DatePicker选中元素的背景颜色
可以修改,Wheel样式的DatePicker底层基于UIKit的UIDatePicker,以下是两种可行的实现方式:
1. 全局设置(影响所有Wheel样式选择器)
在App初始化或根视图的初始化方法中,通过UIAppearance全局设置UIPickerView的选中背景色,该设置会应用到App内所有Wheel样式的选择器(包括DatePicker和普通Picker):
init() { // 替换为你需要的颜色 UIPickerView.appearance().selectionBackgroundColor = .systemYellow }
2. 局部设置(仅作用于指定DatePicker)
如果只想修改单个DatePicker的选中背景色,可选择以下两种方案:
方案一:借助Introspect库获取底层视图
先添加Introspect库依赖,再通过它获取UIDatePicker实例并修改选中背景色:
import Introspect // 在你的视图代码中使用 DatePicker("", selection: $deadline, displayedComponents: [.date, .hourAndMinute]) .datePickerStyle(.wheel) .applyTextColor(.customBlack) .introspect(.datePicker, on: .iOS(.v13, .v14, .v15, .v16, .v17)) { uiDatePicker in uiDatePicker.subviews.forEach { subview in if let pickerView = subview as? UIPickerView { // 设置自定义选中背景色 pickerView.selectionBackgroundColor = .systemGreen } } } .onChange(of: deadline) { value in isEdited = true }
方案二:自定义UIViewRepresentable(无需第三方库)
自己封装一个支持自定义选中背景色的DatePicker组件:
struct CustomWheelDatePicker: UIViewRepresentable { @Binding var selection: Date var displayedComponents: UIDatePicker.Component var selectionBackgroundColor: UIColor func makeUIView(context: Context) -> UIDatePicker { let picker = UIDatePicker() // 根据传入的组件设置选择器模式 picker.datePickerMode = displayedComponents.contains(.date) && displayedComponents.contains(.hourAndMinute) ? .dateAndTime : .time picker.preferredDatePickerStyle = .wheel picker.addTarget(context.coordinator, action: #selector(Coordinator.dateChanged(_:)), for: .valueChanged) // 设置选中背景色 picker.subviews.forEach { subview in if let pickerView = subview as? UIPickerView { pickerView.selectionBackgroundColor = selectionBackgroundColor } } return picker } func updateUIView(_ uiView: UIDatePicker, context: Context) { uiView.date = selection } func makeCoordinator() -> Coordinator { Coordinator(self) } class Coordinator: NSObject { var parent: CustomWheelDatePicker init(_ parent: CustomWheelDatePicker) { self.parent = parent } @objc func dateChanged(_ sender: UIDatePicker) { parent.selection = sender.date } } } // 使用示例 if reminderSet { CustomWheelDatePicker( selection: $deadline, displayedComponents: [.date, .hourAndMinute], selectionBackgroundColor: .systemBlue ) .onChange(of: deadline) { value in isEdited = true } }
注意:通过遍历
subviews获取UIPickerView的方式依赖UIKit的视图层级结构,未来iOS版本更新可能会出现适配问题,使用前需在目标系统版本中测试验证。
内容的提问来源于stack exchange,提问作者Ozgu Ozden
相关产品推荐
相关产品推荐

