macOS下NSHostingController承载SwiftUI NavigationSplitView侧边栏跳转问题

问题场景 #

在macOS中使用NSHostingController承载SwiftUI的NavigationSplitView时，点击标题栏默认的侧边栏按钮会触发意外的页面跳转，同时默认按钮位置在标题右侧。需要实现：

• 点击按钮仅切换侧边栏展开/收起，无跳转
• 侧边栏按钮显示在导航标题（如"My Navigation Title"）之前
• 继续使用NSHostingController作为承载容器

解决方案 #

核心是替换默认侧边栏按钮，手动控制侧边栏状态，避免系统默认的跳转逻辑，同时调整按钮在标题栏的位置。

实现步骤

1. 在SwiftUI视图中用状态变量控制侧边栏可见性
2. 隐藏NavigationSplitView的默认工具栏按钮
3. 在NSHostingController中自定义侧边栏按钮并插入到标题栏左侧
4. 绑定按钮点击事件到SwiftUI的状态变量

完整代码示例 #

SwiftUI视图代码

import SwiftUI

struct ContentView: View {
    @State var isSidebarVisible = true
    
    var body: some View {
        NavigationSplitView(columnVisibility: $isSidebarVisible) {
            List {
                NavigationLink("Item 1", destination: Text("Detail 1"))
                NavigationLink("Item 2", destination: Text("Detail 2"))
            }
            .navigationTitle("Sidebar")
        } content: {
            Text("Select an item")
        } detail: {
            Text("Detail view")
        }
        .navigationSplitViewStyle(.balanced)
        .navigationTitle("My Navigation Title")
        // 隐藏默认导航栏工具栏，移除系统自带的侧边栏按钮
        .toolbar(.hidden, for: .navigationBar)
    }
}

NSHostingController配置代码

import Cocoa
import SwiftUI

class CustomHostingController: NSHostingController<ContentView> {
    override func viewDidAppear() {
        super.viewDidAppear()
        
        guard let window = view.window else { return }
        
        // 创建自定义侧边栏切换按钮
        let sidebarToggle = NSToolbarItem(itemIdentifier: .init("SidebarToggle"))
        sidebarToggle.image = NSImage(systemSymbolName: "sidebar.left", accessibilityDescription: "Toggle Sidebar")
        sidebarToggle.target = self
        sidebarToggle.action = #selector(toggleSidebar)
        
        // 插入按钮到标题栏最左侧
        if let toolbar = window.toolbar {
            // 移除可能存在的默认侧边栏按钮
            toolbar.items.first(where: { $0.itemIdentifier == .sidebarTrackingSeparator })
                .map { toolbar.removeItem($0) }
            toolbar.insertItem(sidebarToggle, at: 0)
        }
    }
    
    @objc private func toggleSidebar() {
        rootView.isSidebarVisible.toggle()
    }
}

// 应用入口
@main
struct SidebarFixApp: App {
    var body: some Scene {
        WindowGroup {
            CustomHostingController(rootView: ContentView())
        }
        .windowStyle(.titleBar)
    }
}

效果说明 #

• 自定义侧边栏按钮固定显示在导航标题左侧
• 点击按钮仅切换侧边栏的展开/收起状态，不会触发任何页面跳转
• 完全保留NSHostingController承载SwiftUI视图的架构，兼容现有项目结构

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