SwiftUI开发MacOS应用：如何实现系统默认样式SearchBar？

完全可行！你可以通过**AppKit的NSSearchField**结合SwiftUI的NSViewRepresentable来实现Mac原生风格的搜索栏，完美替代你现在用的普通TextField，下面是具体的实现步骤：

1. 创建NSSearchField的SwiftUI包装器 #

先写一个SearchField结构体，把AppKit的NSSearchField包装成SwiftUI可用的View：

import SwiftUI
import AppKit

struct SearchField: NSViewRepresentable {
    @Binding var text: String
    var placeholder: String
    
    func makeNSView(context: Context) -> NSSearchField {
        let searchField = NSSearchField()
        searchField.placeholderString = placeholder
        searchField.delegate = context.coordinator
        // 可根据需求调整：显示取消按钮是Mac原生搜索栏的默认样式
        searchField.searchButtonCell?.showsCancelButton = true
        return searchField
    }
    
    func updateNSView(_ nsView: NSSearchField, context: Context) {
        nsView.stringValue = text
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, NSSearchFieldDelegate {
        let parent: SearchField
        
        init(_ parent: SearchField) {
            self.parent = parent
        }
        
        func controlTextDidChange(_ obj: Notification) {
            guard let searchField = obj.object as? NSSearchField else { return }
            parent.text = searchField.stringValue
        }
    }
}

2. 在你的ListView中集成使用 #

接下来就可以像用普通SwiftUI View一样，把这个SearchField加到列表上方，直接复用你现有的过滤逻辑：

struct ContentView: View {
    @State private var searchText = ""
    // 假设你的原始数据源
    let originalItems = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]
    // 过滤后的结果数组
    var filteredItems: [String] {
        searchText.isEmpty ? originalItems : originalItems.filter {
            $0.localizedCaseInsensitiveContains(searchText)
        }
    }
    
    var body: some View {
        VStack {
            // 原生样式搜索栏
            SearchField(text: $searchText, placeholder: "搜索项目...")
                .padding()
            
            List(filteredItems, id: \.self) { item in
                Text(item)
            }
        }
        .frame(width: 400, height: 300)
    }
}

3. 自定义样式（可选） #

如果你想调整搜索栏的细节样式，比如隐藏取消按钮、修改边框风格，直接在makeNSView方法里对NSSearchField做配置即可：

• searchField.searchButtonCell?.showsCancelButton = false 隐藏取消按钮
• searchField.bezelStyle = .roundedBezel 切换边框样式
• 通过searchField.cell还能修改文本颜色、字体等属性

方案说明 #

MacOS的原生搜索控件本身就是AppKit的NSSearchField，通过NSViewRepresentable把它桥接到SwiftUI中，既能获得Apple官方的UI样式（包括放大镜图标、取消按钮、聚焦时的动画效果），又能和SwiftUI的状态管理无缝配合。你之前用TextField写的过滤逻辑完全可以复用，只需要把绑定的搜索文本替换成这个SearchField的绑定值就行。

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