为何DatePicker无法在confirmationDialog中正常显示？

我尝试把DatePicker()放到.confirmationDialog里，但它根本不显示。我想复刻iOS 17.2 beta里Journal应用的这个界面，现在卡壳了，求思路或提示。

我的代码如下：

import SwiftUI

struct DatePickerInConfirmationDialog: View {
    @State var showDialog = false
    @State var date = Date.now
    var body: some View {
        Button("Open dialog") {showDialog = true}
            .confirmationDialog("Set Custom Date", isPresented: $showDialog) {
                DatePicker("Enter date", selection: $date)
                    .datePickerStyle(.compact)
                    .frame(height: 400)
            } message: {
                Text("Set Date")
            }
    }
}

#Preview {
    DatePickerInConfirmationDialog()
}

对比效果：

• iOS 17.2 beta Journal应用的DatePicker效果：
  
• 我当前代码的效果：
  

解决思路与修改方案 #

.confirmationDialog默认会将内容闭包中的视图当作操作按钮处理，直接放DatePicker无法被正确渲染。要实现Journal的效果，需要调整弹窗内容结构并配置展示属性：

1. 将DatePicker与操作按钮封装在容器视图（如VStack）中，作为弹窗自定义内容
2. 使用.presentationDetents设置弹窗高度，确保DatePicker完整显示
3. 匹配Journal的UI细节（如日期选择器样式、按钮布局）

修改后的代码：

import SwiftUI

struct DatePickerInConfirmationDialog: View {
    @State var showDialog = false
    @State var date = Date.now
    
    var body: some View {
        Button("Open dialog") {
            showDialog = true
        }
        .confirmationDialog("Set Custom Date", isPresented: $showDialog) {
            VStack(spacing: 20) {
                DatePicker("Enter date", selection: $date)
                    .datePickerStyle(.graphical)
                    .padding(.horizontal)
                
                HStack(spacing: 16) {
                    Button("Cancel") {
                        showDialog = false
                    }
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(Color(.systemGray6))
                    .cornerRadius(12)
                    
                    Button("Save") {
                        showDialog = false
                        // 此处添加日期保存逻辑
                    }
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(Color.accentColor)
                    .foregroundColor(.white)
                    .cornerRadius(12)
                }
                .padding(.horizontal)
            }
            .padding(.vertical)
        } message: {
            Text("Set Date")
        }
        .presentationDetents([.medium, .large])
        .presentationBackground(.white)
    }
}

#Preview {
    DatePickerInConfirmationDialog()
}

关键说明 #

• 容器视图让弹窗识别为自定义内容，而非单纯操作项
• .graphical样式更贴近Journal的视觉效果，可按需切换为.compact
• .presentationDetents提供合适的弹窗高度，避免日期选择器被截断
• 按钮样式与背景色的调整进一步匹配Journal的UI设计

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