SwiftUI：如何还原原生工具栏样式？

1. 修正模糊背景颜色 #

你当前用的.titlebar材质会呈现灰色调，原生底部输入栏（比如Messages的输入栏）使用的是.contentBackground材质，配合正确的布局配置，能还原白色模糊效果。另外ignoresSafeArea()的全局应用会导致背景交互异常，建议调整为仅忽略底部安全区：

List {
    Rectangle().fill(.clear).frame(height: 1000)
}
.overlay(alignment: .bottom) {
    VStack(spacing: 0) {
        TextField("Enter a message...", text: $content)
            .padding()
    }
    .background(
        VisualEffectView(material: .contentBackground, blendingMode: .withinWindow)
    )
    .edgesIgnoringSafeArea(.bottom)
}

2. 还原原生顶部阴影 #

原生工具栏的阴影是系统级的柔和渐变阴影，不是SwiftUI默认dropShadow()的生硬效果。可以用渐变矩形模拟原生阴影的淡入过渡：

List {
    Rectangle().fill(.clear).frame(height: 1000)
}
.overlay(alignment: .bottom) {
    VStack(spacing: 0) {
        // 模拟原生顶部阴影
        Rectangle()
            .fill(LinearGradient(gradient: Gradient(colors: [Color.black.opacity(0.1), Color.clear]), startPoint: .top, endPoint: .bottom))
            .frame(height: 1)
        TextField("Enter a message...", text: $content)
            .padding()
    }
    .background(
        VisualEffectView(material: .contentBackground, blendingMode: .withinWindow)
    )
    .edgesIgnoringSafeArea(.bottom)
}

如果需要更精准的系统级阴影，也可以封装NSShadow实现：

struct SystemShadowView: NSViewRepresentable {
    func makeNSView(context: Context) -> NSView {
        let view = NSView()
        view.wantsLayer = true
        let shadow = NSShadow()
        shadow.shadowColor = NSColor.black.withAlphaComponent(0.1)
        shadow.shadowOffset = NSSize(width: 0, height: -1)
        shadow.shadowBlurRadius = 3
        view.layer?.shadow = shadow
        return view
    }
    
    func updateNSView(_ nsView: NSView, context: Context) {}
}

替换渐变矩形为SystemShadowView().frame(height: 4)即可。

关键说明 #

• .contentBackground是原生底部栏的标准材质，会自动适配系统浅色/深色模式，比.titlebar更贴合场景
• 仅忽略底部安全区，避免背景延伸到侧边导致视觉错位
• 原生阴影的核心是低透明度、小偏移和柔和模糊，SwiftUI的dropShadow()若设置为color: .black.opacity(0.1), radius: 3, x: 0, y: -1也能近似效果，但NSShadow的系统适配性更好

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