Как создать окно поиска в стиле MacOS Big Sur с внешним кольцом фокусировки в SwiftUI? - PullRequest
Новая
       93

Как создать окно поиска в стиле MacOS Big Sur с внешним кольцом фокусировки в SwiftUI?

0 голосов
/ 14 июля 2020

В macOS Big Sur все встроенные элементы управления окна поиска имеют свечение снаружи, чтобы показать фокус. Как я могу добиться этого эффекта в моем приложении SwiftUI?

macOS Big Sur search field

I built a search bar that looks similar, but it still has a rectangular focus ring which looks really bad. I can turn the focus ring off entirely, but that's not what I want either. I want the exterior glow.

Мое окно поиска

Это мой текущий код SwiftUI. Обратите внимание на переопределение NSTextField focusRingType. При этом я могу отключить кольцо фокусировки, но это не то, что я хочу. По умолчанию дает мне rect angular, плохой фокус. Кажется, что внешний вид - это билет, но он дает тот же результат, что и по умолчанию. Мне интересно, может ли это быть просто ошибкой в ​​текущей бета-версии разработчиков 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 { }
    }
}

1 Ответ

1 голос
/ 15 июля 2020

Я смог понять это! Этот стиль панели поиска предоставляется NSToolbar с использованием NSSearchToolbarItem!

...