Question

macOS 13.0+, Apple introduce a new api named MenuBarExtra which can add a menubar in macOS. But I can t add a searchable protocol into the content to add a search view ?

@main
struct AppWithMenuBarExtra: App {
    @AppStorage("showMenuBarExtra") private var showMenuBarExtra = true

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        MenuBarExtra(
            "App Menu Bar Extra", systemImage: "star",
            isInserted: $showMenuBarExtra)
        {
            NavigationLink {
               Text("Search")
            }.searchable()
        }
    }
}

我希望搜索栏可以显示在菜单栏中

The solution:

@main
struct AppWithMenuBarExtra: App {
    @AppStorage("showMenuBarExtra") private var showMenuBarExtra = true
    @State var searchText: String
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        MenuBarExtra(
            "App Menu Bar Extra", systemImage: "star",
            isInserted: $showMenuBarExtra)
        {
            
            //NavigationLink {
              // Text("Search")
            //}.searchable()
            TextField("Input the search text",text: $searchText)
              .onSubmit { //do search action }
        }
          .menuBarExtraStyle(.window)//add the extra style 
    }
}

Answer 1

我已经解决了这个问题，这是我的解决方案：

我们无法将NavigationLink及其协议searchable添加到MenuBarExtra视图中以添加搜索视图，但我们可以在将修饰符.menuBarExtraStyle设置为.window的同时，在MenuBarExtra中添加类似searchBar的TextField

@main
struct AppWithMenuBarExtra: App {
    @AppStorage("showMenuBarExtra") private var showMenuBarExtra = true
    @State var searchText: String
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        MenuBarExtra(
            "App Menu Bar Extra", systemImage: "star",
            isInserted: $showMenuBarExtra)
        {
            
            //NavigationLink {
              // Text("Search")
            //}.searchable()
            TextField("Input the search text",text: $searchText)
              .onSubmit { //do search action }
        }
          .menuBarExtraStyle(.window)//add the extra style 
    }
}

The solution:

友情链接