如何更改GraphicalDatePickerStyle日期选择器Swiftui的选择颜色（AM，PM）和时间

Posted 2023-05-07

【中文标题】如何更改GraphicalDatePickerStyle日期选择器Swiftui的选择颜色（AM，PM）和时间

【英文标题】：How to change Selection colour(AM,PM) and time of GraphicalDatePickerStyle Date picker Swiftui

【发布时间】：2021-06-27 10:47:42

【问题描述】：

如何更改GraphicalDatePickerStyle 日期选择器文本颜色和选择颜色：-

代码：-

 DatePicker("Time",selection: dateProxy,displayedComponents: [.hourAndMinute])
    .datePickerStyle(GraphicalDatePickerStyle())
    .accentColor(.white)
    .labelsHidden()

输出：-

但我想实现下面给出的DatePicker，是否有可能采用GraphicalDatePickerStyle 样式？

努力实现：-

【参考方案1】：

您似乎正在寻找暗模式选择器！只需将dark colorScheme 应用于组件即可：

DatePicker("Time", selection: $date, displayedComponents: [.hourAndMinute])
    .datePickerStyle(GraphicalDatePickerStyle())
    .background(Color.black)
    .environment(\.colorScheme, .dark) // <- This modifier

结果：

---

? 应用颜色

此外，您可以应用 colorMultiply 修饰符以愉快的方式为选择器着色：

---

演示完整代码

struct ContentView: View 

    @State private var date = Date()

    var colors: [Color] = [.white, .gray, .red, .green, .blue, .orange, .yellow, .pink, .purple] // <- You can use any color! This is just for demonstrate

    var body: some View 
        VStack 
            ForEach(colors, id:\.self)  color in
                DatePicker("Time", selection: $date, displayedComponents: [.hourAndMinute])
                    .datePickerStyle(GraphicalDatePickerStyle())
                    .background(Color.black.grayscale(1))
                    .colorMultiply(color) // <- This line does the trick
                    .environment(\.colorScheme, .dark) // <- Don't Forget this
            
        
    

【参考方案2】：

这适用于 macOS 11 和 ios 14（Xcode 12 beta 3）...

1. 将标签从 DatePicker 中取出 - 我已将其注释掉，因此读者可以清楚地看到标签应从 DatePicker 视图中取出。

将 DatePicker 放在 HStack（或其他 ViewBuilder 中。 为 HStack 中的 DatePicker 添加标签。 使用 .colorMultiplier 视图修饰符更改 DatePicker 日期和时间“按钮”的颜色。

在这个特定示例中，我还根据日期选择器中的绑定值是否为 nil 来更改日期和时间“按钮”的颜色。

    let now = Date()
        HStack 
            Text("Date")
            DatePicker(selection: Binding($observedObject.date, replacingNilWith: now)) 
//              Text("Date")
//                  .foregroundColor(Color(.label))
            
            .colorMultiply(observedObject.date == nil ? Color(.placeholderText) : Color(.label))
        

此外，我在此示例中使用了 Binding 扩展，这是我在整个核心数据项目中使用的东西。

public extension Binding where Value: Equatable 
    init(_ source: Binding<Value?>, replacingNilWith nilProxy: Value) 
        self.init(
            get:  source.wrappedValue ?? nilProxy ,
            set:  newValue in
                if newValue == nilProxy 
                    source.wrappedValue = nil
                
                else 
                    source.wrappedValue = newValue
                
        )
    

一如既往地完全感谢 Alan Quatermain 对 Binding 的此扩展。

【参考方案3】：

我得到的最接近的：

      Group 
         DatePicker("Time",selection: $dateProxy, displayedComponents: [.hourAndMinute])
            .datePickerStyle(GraphicalDatePickerStyle())
            .accentColor(.black)
            .colorInvert()
            .labelsHidden()
            .padding()
      
      .background(Color.black.opacity(0.8))