删除日期选择器边框（macOS / SwiftUI）

Question

我正在尝试通过 DatePicker() 字段进行样式设置，以使其看起来比糟糕的内置样式更好。

这是我到目前为止所拥有的，大部分都有效：

VStack(alignment: .leading, spacing: 2) {
    Text("Update Date")
        .font(.body)
        .foregroundColor(.secondary)
                                
    DatePicker("", selection: $caseUpdates[index].updateDate, in: ...Date(), displayedComponents: .date)
        .labelsHidden()
        .datePickerStyle(.automatic)
        .frame(width: 120, alignment: .leading)
        .frame(height: 32)
        .overlay(RoundedRectangle(cornerRadius: 4).stroke(Color.gray, lineWidth: 1)) // Set custom border
}

这就是我最终得到的结果：

如您所见，日期字段仍然有（丑陋的）内置边框，我不知道如何删除。

我尝试使用

.background(Color.clear)

和

.border(Color.clear)

但似乎没有任何效果。

Answer 1

不知道这个话题是否仍然相关。 Afaik，没有用于设置日期字段样式的内置解决方案。 我帮助自己，使用一个简单的文本字段来添加日期。我对此有自己的看法。

struct DatePickerView: View {
    
    let label: String
    @Binding var date: Date
    let labelWidth: Double
    let spacer: Bool
    
    init(
        label: String,
        date: Binding<Date>,
        labelWidth: Double = AppSettings.labelWidth,
        spacer: Bool = true
    ) {
        self.label = label
        _date = date
        self.labelWidth = labelWidth
        self.spacer = spacer
    }
    
    @State private var showPopoverDate: Bool = false
    
    var body: some View {
        HStack(alignment: .firstTextBaseline, spacing: 0) {
            Label(label, systemImage: "apple.logo")
                .labelStyle(.titleOnly)
                .frame(width: labelWidth, alignment: .leading)
                .multilineTextAlignment(.leading)
//              .font(.callout)
            if spacer {
                Spacer()
            }
            TextField(label, value: $date, formatter: Formatters.dateFormatter, prompt: Text(Formatters.dateFormatter.string(from: Date.now)))
                .frame(width: 100)
                .labelsHidden()
            Button {
                showPopoverDate.toggle()
            } label: {
                Image(systemName: "calendar")
            }
            .buttonStyle(.borderless)
            .foregroundColor(Color.accentColor)
            .padding(.leading, 9)
            .popover(isPresented: $showPopoverDate, arrowEdge: .trailing) {
                DatePicker(selection: Binding<Date>(
                    get: {self.date},
                    set: {self.date = $0}
                ), displayedComponents: [.date], label: { Text("gebDat") })
                .labelsHidden()
                .datePickerStyle(.graphical)
                .accentColor(.accentColor)
                .padding(10)
                .font(.body)
            }
        }
        .frame(height: AppSettings.fieldHeight)
        .padding(AppSettings.fieldPadding)
    }
}

希望有帮助。