SwiftUI:如何在 macOS 11 上使用 NSSearchToolBarItem？

Question

我观看了 WWDC 视频“采用 macOS 的新外观”，他们在视频中的 11:32 在 Swift 中介绍了 NSSearchToolBarItem。
这正是我需要做的，但是如何将此搜索添加到 SwiftUI 的工具栏中？
有很多复杂的例子，但它们似乎都是在这个新 API 之前编写的。一定有更简单的方法吗？

import SwiftUI

var listItems = ["Item 1", "Item 2", "Item 3", "Item 4"]

struct ContentView: View
{
    
    @State var select: String? = "Item 1"
    @State var searchText: String = "hello"

    var body: some View
    {
        VStack
        {
            NavigationView
            {
                List
                {
                    ForEach((0..<listItems.count), id: \.self)
                    {index in
                         Label(listItems[index], systemImage: "briefcase")
                    }
                }
            }
            
            .toolbar
            {
                Button(action: {})
                {
                    Label("Upload", systemImage: "square.and.pencil")
                }
                TextField("Search", text: $searchText)
            }
        }
    }
}

Answer 1

使用 NSSearchToolbarItem 似乎没有明显的方法可以做到这一点但是，直接查看该类，它使用的是 NSSearchField使用 NSViewRepresentable 在 SwiftUI 中相对容易使用的引擎盖下:

struct SearchField: NSViewRepresentable {

    class Coordinator: NSObject, NSSearchFieldDelegate {
        var parent: SearchField

        init(_ parent: SearchField) {
            self.parent = parent
        }

        func controlTextDidChange(_ notification: Notification) {
            guard let searchField = notification.object as? NSSearchField else {
                print("Unexpected control in update notification")
                return
            }
            self.parent.search = searchField.stringValue
        }

    }

    @Binding var search: String

    func makeNSView(context: Context) -> NSSearchField {
        NSSearchField(frame: .zero)
    }

    func updateNSView(_ searchField: NSSearchField, context: Context) {
        searchField.stringValue = search
        searchField.delegate = context.coordinator
    }

    func makeCoordinator() -> Coordinator {
        return Coordinator(self)
    }

}

然后，您可以直接在 ToolbarItem 中使用此托管 View 。 :

ToolbarItem {
    SearchField(search: $filter)
        .frame(minWidth: 100, idealWidth: 200, maxWidth: .infinity)
}

您可能希望稍微调整尺寸(在 .frame() 调用中)以匹配退出平台原生尺寸，但这似乎与 Notes.app 的外观非常匹配。
在 Notes.app 中搜索工具栏项:

从上面的示例代码中搜索工具栏项: