Graphical DatePicker显示异常：点击按钮弹出的时间选择器显示错误

核心问题 #

你的代码里的浮层DatePicker无法正常显示，主要有两个原因：

• 没有添加半透明背景遮罩，DatePicker直接和底层UI叠加，视觉上难以区分，甚至可能被底层元素遮挡；
• DatePicker没有合适的布局约束，直接放在ZStack中没有容器包裹，导致它的尺寸和位置不符合浮层的预期表现。

修复后的代码 #

struct ContentView: View {
    @State var date = Date()
    @State var datePickerOn = false
    
    var body: some View {
        VStack{
            Button("show"){
                datePickerOn = true
            }
            Text("asdf")
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .overlay(
            Group {
                if datePickerOn {
                    // 半透明背景遮罩，点击可关闭浮层
                    Color.black.opacity(0.5)
                        .ignoresSafeArea()
                        .onTapGesture {
                            datePickerOn = false
                        }
                    
                    // DatePicker容器，居中显示
                    DatePicker("选择日期", selection: $date)
                        .datePickerStyle(GraphicalDatePickerStyle())
                        .padding()
                        .background(Color.white)
                        .cornerRadius(12)
                        .shadow(radius: 10)
                }
            }
        )
    }
}

关键修改点 #

• 添加了Color.black.opacity(0.5)作为背景遮罩，既区分浮层和底层UI，又能通过点击遮罩关闭浮层；
• 给DatePicker添加了白色背景、圆角、阴影，让浮层样式更清晰；
• 用padding和背景容器约束DatePicker的布局，确保它居中显示在屏幕上；
• 保留了原有的状态变量逻辑，只调整了Overlay内的布局和交互。

内容的提问来源于stack exchange，提问作者sheldor