How to automatically collapse DatePicker in a form when other field is being edited?

问题

I got a simple SwiftUI view:

import SwiftUI

struct AddItemView: View {
    @State private var title = ""
    @State private var date = Date()

    var body: some View {
        Form {
            Section {
                TextField("Title", text: $title)
                DatePicker(
                    selection: $date,
                    in: Date()...,
                    displayedComponents: .date,
                    label: { Text("Date") }
                )
            }
        }
    }
}

struct AddItemView_Previews: PreviewProvider {
    static var previews: some View {
        AddItemView()
    }
}

I am trying to achieve the following:
If DatePicker is expanded (user tapped date picker, picker showing wheel to select date) and then starts typing text in TextField, DatePicker should automatically switch to initial, minimized mode (just showing label and selected date). Please take a look at screenshot. This is a behaviour in a stock Calendar.app, for example, when creating events.

Any help appreciated, thank you.

回答1:

Here is possible approach. The idea is to reset DatePicker component for each of events result in editing.

Tested with Xcode 11.4 / iOS 13.4

struct AddItemView: View {
    @State private var title = ""
    @State private var date = Date()
    @State private var pickerReset = UUID()

    var body: some View {
        Form {
            Section {
                TitleTextField()

                DatePicker(
                    selection: $date,
                    in: Date()...,
                    displayedComponents: .date,
                    label: { Text("Date") }
                ).id(self.pickerReset)
            }
        }
    }

    private func TitleTextField() -> some View {
        let boundText = Binding<String>(
            get: { self.title },
            set: { self.title = $0; self.pickerReset = UUID() }
        )
        return TextField("Title", text: boundText, onEditingChanged: { editing in
            if editing {
                self.pickerReset = UUID()
            }
        })
    }
}

来源：https://stackoverflow.com/questions/61041209/how-to-automatically-collapse-datepicker-in-a-form-when-other-field-is-being-edi

标签

ios

swift

xcode

swiftui