SwiftUI DatePicker——根本不允许日期？

Question

我正在开发我的第一个 SwiftUI 应用程序，并且已经实现了 ，Form其中一个字段是DatePicker. 然而，这个值是完全可选的。因此，用户可能根本没有输入值。不过，我无法弄清楚如何使用户不需要输入该值。代码本身相当简单：

    DatePicker(selection: $expirationDate,
               displayedComponents: .date) {
        Text("Expiration")
    }

有没有办法让我可以表明$expirationDate可以有一个Date或可以为零？默认情况DatePicker下似乎将值设置为当前值Date，但我无法找到覆盖该行为的方法。想法？

Answer 1

我的解决方案与bdan的解决方案类似，但在他的解决方案中，一旦设置了日期，就无法删除它。

日期未定：

设置日期（可以选择删除它）：

这是代码：

struct DatePickerOptional: View {

let label: String
let prompt: String
let range: PartialRangeThrough<Date>
@Binding var date: Date?
@State private var hidenDate: Date = Date()
@State private var showDate: Bool = false

init(_ label: String, prompt: String, in range: PartialRangeThrough<Date>, selection: Binding<Date?>) {
    self.label = label
    self.prompt = prompt
    self.range = range
    self._date = selection
}

var body: some View {
    ZStack {
        HStack {
            Text(label)
                .multilineTextAlignment(.leading)
            Spacer()
            if showDate {
                Button {
                    showDate = false
                    date = nil
                } label: {
                    Image(systemName: "xmark.circle")
                        .resizable()
                        .frame(width: 16, height: 16)
                        .tint(.textPrimary)
                }
                DatePicker(
                    label,
                    selection: $hidenDate,
                    in: range,
                    displayedComponents: .date
                )
                .labelsHidden()
                .onChange(of: hidenDate) { newDate in
                    date = newDate
                }

            } else {
                Button {
                    showDate = true
                    date = hidenDate
                } label: {
                    Text(prompt)
                        .multilineTextAlignment(.center)
                        .foregroundColor(.textPrimary)
                }
                .frame(width: 120, height: 34)
                .background(
                    RoundedRectangle(cornerRadius: 8)
                        .fill(Color.customPickerBackground)
                )
                .multilineTextAlignment(.trailing)
            }
        }
    }
}

}

Answer 2

您可以在不接收触摸事件的 DatePicker 顶部添加文本，然后添加带有提示的白色背景。这将使日期仍然可点击。

struct DatePickerNullable: View {
    
    let label:String
    @Binding var date:Date?
    @State private var hidenDate:Date = Date()
    
    init(_ label:String, selection:Binding<Date?>){
        self.label = label
        self._date = selection
    }
    
    
    var body: some View {
        GeometryReader{ proxy in
            ZStack{
                DatePicker(label, selection: $hidenDate, displayedComponents: .date)
                if date == nil{
                    Text(label)
                        .italic()
                        .foregroundColor(.gray)
                        .frame(width: proxy.size.width - CGFloat(label.count * 8), alignment: .trailing)
                        .background(Color.white)
                        .frame(maxWidth: .infinity, alignment: .trailing)
                        .allowsHitTesting(false)
                }
            }.onChange(of: hidenDate, perform: { _ in
                self.date = hidenDate
            })
        }
    }
}

默认状态

点击状态