SwiftUI macOS设置窗口：仅让详情区上方工具栏背景为白色

实现思路 #

NavigationSplitView的侧边栏与详情区属于独立的导航上下文，可针对详情区视图单独设置工具栏样式，不影响侧边栏原有效果，用SwiftUI原生修饰器即可完成需求，无需修改全局窗口样式。

具体实现步骤 #

1. 拆分工具栏归属：让侧边栏和详情区的工具栏分别绑定到各自的视图层级，而非全局的NavigationSplitView。
2. 设置详情区工具栏白色背景：在详情区核心视图（或其内部NavigationStack）上使用.toolbarBackground修饰器，指定仅作用于详情区工具栏。
3. 移除工具栏底部分隔线：通过.toolbarBorderVisibility修饰器隐藏详情区工具栏的底部边框。

完整代码示例 #

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationSplitView {
            // 侧边栏视图 - 保留原有工具栏样式
            List(["Item 1", "Item 2", "Item 3"], id: \.self) { item in
                Text(item)
            }
            .toolbar {
                Button("侧边栏操作") {
                    // 侧边栏按钮逻辑
                }
            }
        } detail: {
            // 详情区视图 - 自定义工具栏样式
            ScrollView {
                VStack(spacing: 20) {
                    ForEach(1...20, id: \.self) { index in
                        Text("详情内容 \(index)")
                            .font(.title)
                            .frame(maxWidth: .infinity)
                            .padding()
                            .background(Color.gray.opacity(0.1))
                    }
                }
                .padding()
            }
            .toolbar {
                Button("详情操作") {
                    // 详情按钮逻辑
                }
                Button("另一个操作") {
                    // 其他逻辑
                }
            }
            // 设置详情区工具栏背景为白色
            .toolbarBackground(.white, for: .toolbar)
            // 移除工具栏底部分隔线
            .toolbarBorderVisibility(.hidden, for: .toolbar)
        }
        .navigationTitle("分栏视图示例")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

关键说明 #

• .toolbarBackground(.white, for: .toolbar)：仅对当前视图上下文所属的工具栏生效，只会改变详情区工具栏背景，不影响侧边栏。
• .toolbarBorderVisibility(.hidden, for: .toolbar)：隐藏指定工具栏的底部分隔线，仅作用于详情区工具栏。
• 无需使用HiddenTitleBarWindowStyle()，避免出现背景透明、内容滚动穿透的问题。

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