macos - SwiftUI:从 macOS TextField 中删除 'Focus Ring' 高亮边框

Question

我使用以下代码在 SwiftUI 中创建了一个自定义搜索栏。它在 iOS/Catalyst 上运行良好:

...但是当在 macOS 上本地运行时，“聚焦环”突出显示的边框样式(当用户选择文本字段时)反而会破坏效果:

使用 .textFieldStyle(PlainTextFieldStyle())已从基础字段(我认为是 NSTextField )中删除了大部分默认样式，但没有删除焦点环。
有没有办法删除这个？我尝试创建一个自定义 TextFieldStyle并应用它，但找不到任何修饰符来设置该边框的样式。

public struct SearchTextView: View {
    
    @Binding var searchText: String

    #if !os(macOS)
    private let backgroundColor = Color(UIColor.secondarySystemBackground)
    #else
    private let backgroundColor = Color(NSColor.controlBackgroundColor)
    #endif
    
    public var body: some View {
        
        HStack {
            
            Spacer()
            
            #if !os(macOS)
            Image(systemName: "magnifyingglass")
            #else
            Image("icons.general.magnifyingGlass")
            #endif
            
            TextField("Search", text: self.$searchText)
                .textFieldStyle(PlainTextFieldStyle())
                .foregroundColor(.primary)
                .padding(8)
        
            Spacer()
        }
        .foregroundColor(.secondary)
        .background(backgroundColor)
        .cornerRadius(12)
        .padding()
    }
    
    public init(searchText: Binding<String>) {
        self._searchText = searchText
    }
}

Answer 1

正如 Asperi 的回答中所述到一个类似的问题 here ，(尚)无法使用 SwiftUI 关闭特定字段的对焦环；然而，以下解决方法将禁用所有 NSTextField 的对焦环应用程序中的实例 :

extension NSTextField {
    open override var focusRingType: NSFocusRingType {
        get { .none }
        set { }
    }
}

如果您想在 View 中用您自己的自定义对焦环替换它， onEditingChanged参数可以帮助你实现这一点(见下面的例子)；然而，不幸的是，当用户键入第一个字母时，它会在 macOS 上调用，而不是当他们第一次单击该字段时(这并不理想)。

理论上，您可以使用 onFocusChange封在 focusable修饰符，但目前似乎没有为这些 macOS 文本字段调用它(从 macOS 10.15.3 开始)。

public struct SearchTextView: View {

    @Binding var searchText: String

    @State private var hasFocus = false

    #if !os(macOS)
    private var backgroundColor = Color(UIColor.secondarySystemBackground)
    #else
    private var backgroundColor = Color(NSColor.controlBackgroundColor)
    #endif

    public var body: some View {

        HStack {

            Spacer()

            #if !os(macOS)
            Image(systemName: "magnifyingglass")
            #else
            Image("icons.general.magnifyingGlass")
            #endif

            TextField("Search", text: self.$searchText, onEditingChanged: { currentlyEditing in
                self.hasFocus = currentlyEditing // If the editing state has changed to be currently edited, update the view's state
            })
                .textFieldStyle(PlainTextFieldStyle())
                .foregroundColor(.primary)
                .padding(8)

            Spacer()
        }
        .foregroundColor(.secondary)
        .background(backgroundColor)
        .cornerRadius(12)
        .border(self.hasFocus ? Color.accentColor : Color.clear, width: self.hasFocus ? 3 : 0)
        .padding()
    }

    public init(searchText: Binding<String>) {
        self._searchText = searchText
    }
}