SwiftUI/MacOS中如何收起展开的DatePicker？

你的问题核心在于：当DatePicker的弹出选择器仍处于活跃状态时，立即将其从视图树中移除（或隐藏交互），导致SwiftUI与底层UIKit的视图层级冲突，引发崩溃或锁定。以下是几种可行的解决方案：

方案一：延迟切换视图状态 #

通过短暂延迟，等待DatePicker的弹出框完成收起动画后，再切换回Text视图，避免视图层级冲突：

struct ContentView: View {
    @State private var date: Date = .now
    @State private var editMode: Bool = false
    
    var body: some View {
        VStack {
            if editMode {
                DatePicker("Test", selection: $date)
                    .labelsHidden()
                    .frame(width: 50)
                    .onChange(of: date) { _ in
                        // 延迟0.3秒，确保弹出框完全收起
                        DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
                            editMode = false
                        }
                    }
            } else {
                Text(date.formatted(date: .abbreviated, time: .omitted))
                    .onTapGesture {
                        editMode = true
                    }
            }
        }
        .padding()
    }
}

方案二：保持DatePicker在视图树中，控制交互与显示 #

让DatePicker始终存在于视图层级中，仅通过透明度和交互权限控制显示状态，避免视图移除引发的冲突：

struct ContentView: View {
    @State private var date: Date = .now
    @State private var editMode: Bool = false
    
    var body: some View {
        ZStack {
            DatePicker("Test", selection: $date)
                .labelsHidden()
                .frame(width: 50)
                .opacity(editMode ? 1 : 0)
                .allowsHitTesting(editMode) // 仅编辑模式下允许交互
                .onChange(of: date) { _ in
                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
                        editMode = false
                    }
                }
            
            Text(date.formatted(date: .abbreviated, time: .omitted))
                .opacity(editMode ? 0 : 1)
                .onTapGesture {
                    editMode = true
                }
        }
        .padding()
    }
}

方案三：使用焦点状态管理（更优雅的方式） #

通过@FocusState绑定DatePicker的焦点状态，主动控制弹出框的收起与视图切换：

struct ContentView: View {
    @State private var date: Date = .now
    @State private var editMode: Bool = false
    @FocusState private var isDatePickerFocused: Bool
    
    var body: some View {
        VStack {
            if editMode {
                DatePicker("Test", selection: $date)
                    .labelsHidden()
                    .frame(width: 50)
                    .focused($isDatePickerFocused)
                    .onChange(of: date) { _ in
                        // 失去焦点，触发弹出框收起
                        isDatePickerFocused = false
                    }
                    .onChange(of: isDatePickerFocused) { focused in
                        // 焦点完全失去后切换回Text
                        if !focused {
                            editMode = false
                        }
                    }
            } else {
                Text(date.formatted(date: .abbreviated, time: .omitted))
                    .onTapGesture {
                        editMode = true
                        // 主动让DatePicker获取焦点，展开选择器
                        DispatchQueue.main.async {
                            isDatePickerFocused = true
                        }
                    }
            }
        }
        .padding()
    }
}

关键原理 #

所有方案的核心都是避免在DatePicker弹出框活跃时直接修改其视图存在状态，要么等待弹出框收起后再切换视图，要么通过焦点/交互控制来管理弹出状态，从根源上避免视图层级冲突。

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