iOS开发者转macOS SwiftUI：如何实现Xcode式Scheme>Target选择器UI？

不用完全自定义开发，macOS SwiftUI有现成的方案可以实现类似的交互，分两种场景给你参考：

1. SwiftUI原生快速实现：Menu + ToolbarItem #

SwiftUI自带的Menu组件直接支持点击弹出菜单的交互，搭配工具栏使用完全适配macOS的交互逻辑，代码示例如下：

struct ContentView: View {
    @State private var selectedScheme = "MyApp"
    @State private var selectedTarget = "iPhone 15"
    
    var body: some View {
        Text("主内容区域")
            .toolbar {
                // Scheme选择器
                ToolbarItem(placement: .primaryAction) {
                    Menu {
                        Button("App Scheme 1") { selectedScheme = "App Scheme 1" }
                        Button("App Scheme 2") { selectedScheme = "App Scheme 2" }
                        Button("App Scheme 3") { selectedScheme = "App Scheme 3" }
                    } label: {
                        HStack(spacing: 4) {
                            Text(selectedScheme)
                            Image(systemName: "chevron.down")
                                .font(.caption)
                        }
                    }
                }
                
                // 分隔箭头
                ToolbarItem(placement: .primaryAction) {
                    Text(">")
                        .foregroundColor(.secondary)
                }
                
                // Target选择器
                ToolbarItem(placement: .primaryAction) {
                    Menu {
                        Button("iPhone 15") { selectedTarget = "iPhone 15" }
                        Button("iPad Pro 12.9-inch") { selectedTarget = "iPad Pro 12.9-inch" }
                        Button("Mac Catalyst") { selectedTarget = "Mac Catalyst" }
                    } label: {
                        HStack(spacing: 4) {
                            Text(selectedTarget)
                            Image(systemName: "chevron.down")
                                .font(.caption)
                        }
                    }
                }
            }
    }
}

这个方案纯SwiftUI实现，不需要AppKit基础，就能实现点击弹出菜单、选中项实时更新的核心功能，交互逻辑和Xcode的选择器一致。

2. 还原Xcode原生样式：桥接AppKit的NSPopUpButton #

如果想要和Xcode选择器完全一致的视觉样式（比如边框、悬停高亮效果），可以通过NSViewRepresentable桥接AppKit的NSPopUpButton，代码示例：

// 封装NSPopUpButton为SwiftUI View
struct PopUpButton: NSViewRepresentable {
    let options: [String]
    @Binding var selectedOption: String
    
    func makeNSView(context: Context) -> NSPopUpButton {
        let button = NSPopUpButton()
        button.addItems(withTitles: options)
        button.selectItem(withTitle: selectedOption)
        button.target = context.coordinator
        button.action = #selector(Coordinator.onSelectionChanged(_:))
        return button
    }
    
    func updateNSView(_ nsView: NSPopUpButton, context: Context) {
        nsView.selectItem(withTitle: selectedOption)
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject {
        let parent: PopUpButton
        
        init(_ parent: PopUpButton) {
            self.parent = parent
        }
        
        @objc func onSelectionChanged(_ sender: NSPopUpButton) {
            if let selectedTitle = sender.selectedItem?.title {
                parent.selectedOption = selectedTitle
            }
        }
    }
}

// 在ContentView中使用
struct ContentView: View {
    @State private var selectedScheme = "MyApp"
    @State private var selectedTarget = "iPhone 15"
    
    let schemeOptions = ["MyApp", "App Scheme 1", "App Scheme 2"]
    let targetOptions = ["iPhone 15", "iPad Pro 12.9-inch", "Mac Catalyst"]
    
    var body: some View {
        Text("主内容区域")
            .toolbar {
                ToolbarItem(placement: .primaryAction) {
                    PopUpButton(options: schemeOptions, selectedOption: $selectedScheme)
                }
                
                ToolbarItem(placement: .primaryAction) {
                    Text(">")
                        .foregroundColor(.secondary)
                }
                
                ToolbarItem(placement: .primaryAction) {
                    PopUpButton(options: targetOptions, selectedOption: $selectedTarget)
                }
            }
    }
}

这个方案能获得和Xcode完全一致的原生控件样式，虽然涉及少量AppKit代码，但逻辑简单，适合追求极致还原的场景。

总结：优先用SwiftUI的Menu快速实现核心功能，要完全匹配Xcode视觉样式就用NSPopUpButton桥接方案，都不需要从零开始自定义。

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