SwiftUI中如何修改紧凑样式DatePicker弹出框的位置与对齐方式？

核心解决方案 #

要实现Popover与DatePicker的居中对齐，关键是通过popover修饰符的attachmentAnchor参数指定锚点为控件中心。如果需要自定义紧凑样式DatePicker的弹出位置，系统默认的弹出框无法直接修改，需自行实现自定义Popover内容来完全控制位置和对齐方式。

修改后的代码示例 #

@State private var showDatePicker = false
@State private var selectedDate = Date()

var body: some View {
    VStack(alignment: .center) {
        // 紧凑样式DatePicker，点击触发自定义Popover
        DatePicker("", selection: $selectedDate, displayedComponents: .hourAndMinute)
            .datePickerStyle(.compact)
            .frame(width: 50, height: 30)
            // 设置Popover锚点为控件中心，箭头指向顶部
            .popover(isPresented: $showDatePicker, attachmentAnchor: .point(.center), arrowEdge: .top) {
                // 自定义Popover内的日期选择器
                DatePicker("", selection: $selectedDate, displayedComponents: .hourAndMinute)
                    .padding()
                    .background(Color.white)
                    .cornerRadius(12)
                    .shadow(radius: 4)
            }
            .onTapGesture {
                showDatePicker.toggle()
            }
        
        Spacer()
    }
    .padding()
    .background(Color.white)
    .cornerRadius(16)
    .shadow(radius: 8)
    .frame(width: 380, height: 530)
}

关键说明 #

• 居中对齐实现：attachmentAnchor: .point(.center) 将Popover的锚定位置设为DatePicker的中心，确保弹出框与控件居中对齐。
• 箭头位置控制：arrowEdge 参数可指定Popover箭头指向，示例中设为.top让箭头指向DatePicker顶部，可根据需求改为.bottom、.leading或.trailing。
• 系统默认弹出框限制：如果依赖系统自带的紧凑DatePicker弹出框，SwiftUI没有提供直接修改其位置的API，因为这属于系统UI组件的固有行为。这种场景下，自定义Popover是唯一能完全控制位置的方案。

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