Why does the transition of datePicker View not work as intended?

user_15445779 0
Viewed 142

If I try to open this DatePicker, the view is jumping while the transition, before coming to the fixed position. There is also a long error message in the console ..."Unable to simultaneously satisfy constraints."...

If I only display the .date component there isn't this problem. Is it a internal problem? If yes, how can I archive the same behavior because I want the date+time picker without having the detail popup screen, for faster selection.

Thanks for any help :)

https://imgur.com/a/IEy2syY (At the second button Tap there is the buggy transition)

struct ContentView: View {
    @State var toggle = false
    @State var date = Date(timeIntervalSinceNow: 0)
    var body: some View {
        ZStack{
            Button("sdflkj"){
                toggle.toggle()
            }
            VStack{
                Spacer()
                if toggle{
                    DatePicker("lsadjf", selection: $date, displayedComponents: [.date,.hourAndMinute])
                        .labelsHidden()
                        .datePickerStyle(GraphicalDatePickerStyle())
                }
            }
        }
   
    }
}
swiftui xcode
1 Answers

It seems to be an error caused by overlapping the Button and DatePicker.



Tested with iPhone 12 simulator

struct ContentView: View {
    
    @State var toggle = false
    @State var date = Date(timeIntervalSinceNow: 0)
    
    var body: some View {
        ZStack{
            Button("Button"){
                // add `withAnimation()`
                withAnimation(.easeIn) {
                    toggle.toggle()
                }
            }
            .offset(y: -50) // set y offset for prevent overlapping of Button and DatePicker
            
            VStack{
                Spacer()
                if toggle {
                    DatePicker("", selection: $date, displayedComponents: [.date,.hourAndMinute])
                        .padding()
                        .labelsHidden()
                        .datePickerStyle(GraphicalDatePickerStyle())
                        .zIndex(5) // or add .zIndex for prevent overlapping of Button and DatePicker
                }
            }
        }
    }
}
user_156039930
Related