使用SwiftUI开发macOS透明NSWindow时出现渲染Bug

问题分析 #

你遇到的是macOS透明窗口下SwiftUI渲染优化的常见问题：当窗口背景透明时，系统初始渲染添加的内容轮廓（或阴影）没有在后续重绘时被正确清除，导致动态更新的内容（比如你的计数器）和初始残留的轮廓重叠出现残影。设置非透明背景时系统会自动清除画布，所以问题消失，但hasShadow=false只是关闭了窗口阴影，无法处理渲染层面的残留。

解决方案 #

以下几个方案可以逐步尝试，按优先级排序：

1. 底层配置NSWindow属性

在App结构体的onAppear中直接配置窗口的核心属性，确保透明渲染的正确性：

@main
struct YourApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .background(.clear)
                .onAppear {
                    guard let window = NSApplication.shared.windows.first else { return }
                    window.isOpaque = false
                    window.backgroundColor = .clear
                    // 彻底移除窗口相关的阴影/轮廓
                    window.styleMask.remove(.shadow)
                    // 强制内容视图使用图层渲染，确保透明背景正确处理
                    window.contentView?.wantsLayer = true
                    window.contentView?.layer?.backgroundColor = CGColor.clear
                    window.contentView?.layer?.masksToBounds = true
                }
        }
        .windowStyle(.hiddenTitleBar) // 根据你的需求调整窗口样式
    }
}

2. 强制动态视图重绘清除画布

如果窗口配置后仍有残影，针对动态更新的计数器文本，用自定义NSView包装，强制每次更新时清除重绘区域：

// 自定义NSView包装器
struct CounterView: NSViewRepresentable {
    @Binding var count: Int
    
    func makeNSView(context: Context) -> CounterNSView {
        CounterNSView()
    }
    
    func updateNSView(_ nsView: CounterNSView, context: Context) {
        nsView.count = count
        nsView.setNeedsDisplay(.infinite) // 强制重绘整个视图区域
    }
}

class CounterNSView: NSView {
    var count: Int = 0 {
        didSet { setNeedsDisplay(.infinite) }
    }
    
    override func draw(_ dirtyRect: NSRect) {
        super.draw(dirtyRect)
        // 先清除当前重绘区域
        NSColor.clear.setFill()
        dirtyRect.fill()
        
        // 绘制计数器文本
        let text = "\(count)"
        let attributes: [NSAttributedString.Key: Any] = [
            .font: NSFont.systemFont(ofSize: 24),
            .foregroundColor: NSColor.white // 根据你的文本颜色调整
        ]
        text.draw(at: NSPoint(x: 10, y: 10), withAttributes: attributes)
    }
    
    // 标记视图为非不透明，确保透明渲染
    override var isOpaque: Bool { false }
}

然后在ContentView中替换原来的Text：

struct ContentView: View {
    @State private var count = 0
    
    var body: some View {
        VStack {
            Image("your-static-image") // 你的静态图片
            CounterView(count: $count)
        }
        .background(.clear)
        .onAppear {
            Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { _ in
                count += 1
            }
        }
    }
}

3. 禁用SwiftUI的视图缓存优化

如果上述方案都无效，可以尝试给动态更新的视图添加唯一的id，强制SwiftUI每次更新时重建视图，避免缓存残留：

Text("\(count)")
    .id(count) // 每次count变化时重建Text视图
    .foregroundColor(.white)

这个方案简单但可能影响性能，适合快速验证问题根源。

关键注意点 #

• 确保所有层级的视图背景都设置为.clear，避免意外的不透明区域干扰渲染
• 不要混合使用SwiftUI的背景设置和NSWindow的背景配置，保持一致性
• 测试时关闭Xcode的Live Preview，直接运行真机/模拟器，预览模式可能有额外的渲染差异

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