如何在SwiftUI的MenuBarExtra中添加SearchBar搜索栏？

问题出在searchable修饰符的应用层级和上下文上：searchable需要依附在**导航容器（如NavigationStack/NavigationView）**的上下文中，而不是直接加在单个NavigationLink上，且MenuBarExtra的内容需要正确嵌套导航结构才能让搜索栏正常显示。

修正后的代码示例 #

@main
struct AppWithMenuBarExtra: App {
    @AppStorage("showMenuBarExtra") private var showMenuBarExtra = true
    // 绑定搜索文本，用于接收用户输入
    @State private var searchText = ""

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        MenuBarExtra(
            "App Menu Bar Extra", systemImage: "star",
            isInserted: $showMenuBarExtra)
        {
            // 外层嵌套NavigationStack作为导航容器，为searchable提供渲染环境
            NavigationStack {
                List {
                    NavigationLink("Search", destination: Text("Search"))
                    // 可根据需求添加更多菜单栏选项
                    NavigationLink("功能1", destination: Text("功能1页面"))
                    NavigationLink("功能2", destination: Text("功能2页面"))
                }
                // 在导航容器层级添加searchable修饰符
                .searchable(text: $searchText, prompt: "搜索内容")
            }
        }
    }
}

关键说明 #

• 导航容器依赖：searchable必须在NavigationStack（macOS 13+推荐）或NavigationView的上下文中使用，单独的NavigationLink无法提供搜索栏所需的渲染环境。
• 搜索文本绑定：通过@State变量绑定搜索文本，可后续基于该变量实现搜索过滤逻辑。
• 列表结构适配：使用List组织菜单项，既契合菜单栏的视觉风格，也能让搜索栏正确嵌入顶部区域。

内容的提问来源于stack exchange，提问作者Duke