如何在NSSplitViewController中实现自定义分隔栏？

问题原因分析 #

你触发的异常A SplitView managed by a SplitViewController cannot have its arranged views modified，核心原因是NSSplitViewController会全权管理其所属SplitView的arranged子视图，所有子视图的添加/移除必须通过addSplitViewItem(_:)/removeSplitViewItem(_:)方法完成，手动调用addArrangedSubview会破坏控制器的管理逻辑，导致异常。

正确实现方案 #

你需要同时结合自定义NSSplitView和NSSplitViewController：前者负责自定义分隔栏的样式和嵌入SwiftUI内容，后者负责管理子控制器的生命周期和布局逻辑。不需要绕过NSSplitViewController，它能帮你处理很多基础工作（比如布局保存、子视图状态管理）。

具体实现步骤 #

1. 定义SwiftUI分隔栏视图

先实现你想要的Xcode风格分隔栏内容：

struct XcodeStyleDivider: View {
    var body: some View {
        // 模拟Xcode代码区与控制台之间的分隔栏样式
        Color(NSColor.separatorColor)
            .overlay(
                Rectangle()
                    .fill(Color(NSColor.black.withAlphaComponent(0.1)))
                    .frame(width: 1)
            )
            .frame(width: 8) // 与后续设置的分隔栏厚度一致
    }
}

2. 自定义NSSplitView子类

重写分隔栏厚度，并在布局时动态添加SwiftUI视图作为分隔栏：

class CustomSplitView: NSSplitView {
    // 自定义分隔栏宽度
    override var dividerThickness: CGFloat {
        8
    }
    
    // 存储所有分隔栏的SwiftUI宿主视图，避免重复创建
    private var dividerHosts: [NSHostingView<XcodeStyleDivider>] = []
    
    override func layout() {
        super.layout()
        
        // 先移除旧的分隔栏视图
        dividerHosts.forEach { $0.removeFromSuperview() }
        dividerHosts.removeAll()
        
        // 为每个分隔栏创建并添加SwiftUI视图
        for dividerIndex in 0..<numberOfDividers {
            let dividerFrame = self.dividerRect(at: dividerIndex)
            let hostingView = NSHostingView(rootView: XcodeStyleDivider())
            hostingView.frame = dividerFrame
            
            // 将分隔栏视图放在对应子视图的下方，确保层级正确
            if let subview = subviews[dividerIndex] {
                addSubview(hostingView, positioned: .below, relativeTo: subview)
            } else {
                addSubview(hostingView)
            }
            
            dividerHosts.append(hostingView)
        }
    }
    
    // 清空默认分隔栏绘制，避免与自定义视图冲突
    override func drawDivider(in rect: NSRect) {}
}

3. 在NSSplitViewController中使用自定义SplitView

让控制器使用我们的自定义SplitView，通过addSplitViewItem添加子控制器：

class FooController: NSSplitViewController {
    override func loadView() {
        // 初始化自定义SplitView并赋值给控制器
        let customSplitView = CustomSplitView()
        self.splitView = customSplitView
        
        super.loadView()
        
        // 添加你的子控制器（示例：代码区和控制台）
        let codeVC = NSSplitViewItem(viewController: CodeEditorViewController())
        let consoleVC = NSSplitViewItem(viewController: ConsoleViewController())
        
        addSplitViewItem(codeVC)
        addSplitViewItem(consoleVC)
    }
}

关键注意点 #

• 永远不要手动修改NSSplitViewController管理的SplitView的arranged子视图，所有子内容必须通过NSSplitViewItem添加。
• 在layout()方法中更新分隔栏视图的位置，因为SplitView布局变化时（比如拖拽调整大小），分隔栏的frame会改变。
• 使用NSHostingView将SwiftUI视图包装成AppKit的NSView，才能嵌入到SplitView中。
• 重写drawDivider清空默认绘制，避免系统默认的灰色分隔栏与自定义视图重叠。

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