如何在macOS的SwiftUI中以编程方式控制Menu组件

方案1：用SwiftUI Popover模拟悬浮下拉列表 #

SwiftUI的Popover支持通过isPresented绑定控制显示/隐藏，且默认悬浮在视图上方，不会挤压其他布局，刚好匹配你需要的效果。可以把下拉选项放在Popover里，绑定到任意触发条件（比如TextField点击、自定义按钮事件等）。

示例代码：

struct ComboBoxView: View {
    @State private var inputText = ""
    @State private var showDropdown = false
    private let listItems = ["A", "B", "C", "D"]
    
    var body: some View {
        VStack {
            TextField("输入内容", text: $inputText)
                .textFieldStyle(.roundedBorder)
                .padding()
                .onTapGesture {
                    showDropdown.toggle()
                }
                .popover(isPresented: $showDropdown, arrowEdge: .bottom) {
                    VStack(spacing: 0) {
                        ForEach(listItems, id: \.self) { item in
                            Button(action: {
                                inputText = item
                                showDropdown = false
                            }) {
                                Text(item)
                                    .frame(maxWidth: .infinity, alignment: .leading)
                                    .padding(.vertical, 8)
                                    .padding(.horizontal, 16)
                            }
                            .hoverEffect(.highlight)
                            
                            // 添加分隔线模拟系统Menu样式
                            if item != listItems.last {
                                Divider()
                            }
                        }
                    }
                    .frame(width: 200)
                    .background(Color(.windowBackgroundColor))
                    .cornerRadius(6)
                    .shadow(radius: 4)
                }
            
            Text("其他内容，不会被下拉列表挤压")
                .padding()
        }
    }
}

方案2：包装AppKit的NSComboBox（原生系统组件） #

如果想要完全贴合macOS系统风格的ComboBox，直接包装AppKit的NSComboBox是最优解——它原生支持编程控制下拉列表的显示/隐藏，交互逻辑完全符合系统规范。

示例代码：

struct NativeComboBox: NSViewRepresentable {
    @Binding var selectedText: String
    let items: [String]
    @Binding var showDropdown: Bool
    
    func makeNSView(context: Context) -> NSComboBox {
        let comboBox = NSComboBox()
        comboBox.usesDataSource = true
        comboBox.dataSource = context.coordinator
        comboBox.delegate = context.coordinator
        comboBox.stringValue = selectedText
        return comboBox
    }
    
    func updateNSView(_ nsView: NSComboBox, context: Context) {
        nsView.stringValue = selectedText
        // 编程控制下拉列表显示/隐藏
        if showDropdown {
            nsView.openPopup()
        } else {
            nsView.closePopup()
        }
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(parent: self)
    }
    
    class Coordinator: NSObject, NSComboBoxDataSource, NSComboBoxDelegate {
        let parent: NativeComboBox
        
        init(parent: NativeComboBox) {
            self.parent = parent
        }
        
        func numberOfItems(in comboBox: NSComboBox) -> Int {
            parent.items.count
        }
        
        func comboBox(_ comboBox: NSComboBox, objectValueForItemAt index: Int) -> Any? {
            parent.items[index]
        }
        
        func comboBoxSelectionDidChange(_ notification: Notification) {
            guard let comboBox = notification.object as? NSComboBox,
                  let selectedIndex = comboBox.selectedIndex,
                  selectedIndex < parent.items.count else { return }
            parent.selectedText = parent.items[selectedIndex]
            parent.showDropdown = false
        }
    }
}

// 使用示例
struct ComboBoxDemo: View {
    @State private var selectedText = ""
    @State private var showDropdown = false
    private let items = ["Apple", "Banana", "Cherry", "Date"]
    
    var body: some View {
        VStack {
            NativeComboBox(selectedText: $selectedText, items: items, showDropdown: $showDropdown)
                .frame(width: 200)
                .padding()
            
            Button("手动显示下拉列表") {
                showDropdown.toggle()
            }
            
            Text("选中内容：\(selectedText)")
                .padding()
        }
    }
}

方案3：自定义悬浮下拉列表（ZStack + Overlay） #

如果想完全自定义UI样式，用ZStack把下拉列表放在视图顶层，通过动画控制显示/隐藏，同样不会挤占下方布局空间。

示例代码：

struct CustomComboBox: View {
    @State private var inputText = ""
    @State private var showDropdown = false
    private let listItems = ["Option 1", "Option 2", "Option 3"]
    // 记录TextField位置，用于定位下拉列表
    @State private var textFieldFrame: CGRect = .zero
    
    var body: some View {
        ZStack(alignment: .topLeading) {
            VStack {
                TextField("请选择或输入", text: $inputText)
                    .textFieldStyle(.roundedBorder)
                    .padding()
                    .background(
                        // 获取TextField的屏幕位置
                        GeometryReader { geo in
                            Color.clear.onAppear {
                                textFieldFrame = geo.frame(in: .global)
                            }
                        }
                    )
                    .onTapGesture {
                        showDropdown.toggle()
                    }
                
                Text("下方内容不受下拉列表影响")
                    .padding()
            }
            
            // 悬浮下拉列表
            if showDropdown {
                VStack(spacing: 0) {
                    ForEach(listItems, id: \.self) { item in
                        Button(action: {
                            inputText = item
                            showDropdown = false
                        }) {
                            Text(item)
                                .frame(maxWidth: .infinity, alignment: .leading)
                                .padding(.vertical, 8)
                                .padding(.horizontal, 16)
                        }
                        .hoverEffect(.highlight)
                        
                        if item != listItems.last {
                            Divider()
                        }
                    }
                }
                .frame(width: textFieldFrame.width)
                .background(Color(.windowBackgroundColor))
                .cornerRadius(6)
                .shadow(radius: 4)
                .position(x: textFieldFrame.midX, y: textFieldFrame.maxY + 8)
                .transition(.opacity.combined(with: .scale))
            }
        }
        .animation(.easeInOut(duration: 0.2), value: showDropdown)
    }
}

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