为什么 datePicker View 的转换不能按预期工作？

Question

如果我尝试打开此 DatePicker，视图会在过渡时跳跃，然后到达固定位置。控制台中还有一条很长的错误信息...“无法同时满足约束。”...

如果我只显示 .date 组件，就不存在这个问题。是内部问题吗？如果是，我如何存档相同的行为，因为我想要日期+时间选择器而没有详细的弹出屏幕，以便更快地选择。

感谢您的帮助:)

https://imgur.com/a/IEy2syY（在第二个按钮点击有错误的过渡）

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())
                }
            }
        }
   
    }
}

Answer 1

好像是Button和DatePicker重叠导致的错误。

---

使用 iPhone 12 模拟器测试

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
                }
            }
        }
    }
}