如何在 SwiftUI 中创建带有外部对焦环的 macOS Big Sur 风格的搜索框？

Question

在 macOS Big Sur 中，所有内置搜索框控件的外部都会发光以显示焦点。如何在我的 SwiftUI 应用中实现这种效果？

我建立了一个看起来很相似的搜索栏，但它仍然有一个看起来很糟糕的矩形对焦环。我可以完全关闭对焦环，但这也不是我想要的。我想要外在的光芒。

这是我当前的 SwiftUI 代码。请注意 NSTextField focusRingType 覆盖。有了它，我可以关闭对焦环，但这不是我想要的。默认给了我矩形，不好的焦点。看起来外部将是票，但它产生与默认相同的结果。我想知道这是否只是当前 Big Sur/Xcode/SwiftUI 开发人员测试版中的一个错误。

import SwiftUI

struct SearchBarView: View {
    
    @Binding var searchText: String
    
    var body: some View {
        HStack {
            TextField("Search ...", text: self.$searchText)
                .textFieldStyle(PlainTextFieldStyle())
                .padding(7)
                .padding(.horizontal, 25)
                .background(Color("systemGray6"))
                .cornerRadius(8)
                .overlay(
                    HStack {
                        Image(systemName: "magnifyingglass")
                            .foregroundColor(.gray)
                            .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
                            .padding(.leading, 10)
                    }
                )
                .padding(.horizontal, 10)
        }
        .padding()
    }
}

struct SearchBarView_Previews: PreviewProvider {
    static var previews: some View {
        VStack {
            SearchBarView(searchText: .constant(""))
                .previewLayout(.fixed(width: 35, height: 50))
                .environment(\.colorScheme, .dark)
            
            SearchBarView(searchText: .constant(""))
                .previewLayout(.fixed(width: 35, height: 50))
                .environment(\.colorScheme, .light)
        }
    }
}

extension NSTextField {
    open override var focusRingType: NSFocusRingType {
        //get { .none }
        get { .default }
        // get { .exterior } // same as .default, could just be bug in Big Sur Dev Beta 1&2?
        set { }
    }
}

Answer 1

我能够解决这个问题！这种风格的搜索栏是由NSToolbar使用NSSearchToolbarItem提供的！