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

Question

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

代码:-

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

输出：-

但是我想实现下面给出的DatePicker，是否可以GraphicalDatePickerStyle风格？

努力实现：-

Answer 1

这适用于 macOS 11 和 iOS 14 (Xcode 12 beta 3)...

1.Take 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 的扩展。

Answer 2

我最接近的：

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

Answer 3

看来您正在寻找深色模式选择器！只需将 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
            }
        }
    }
}

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

How to change Selection colour(AM,PM) and time of GraphicalDatePickerStyle Date picker Swiftui

swift

swiftui

datepicker

uidatepicker

结果：

应用颜色

演示完整代码