为什么不透明度为 0.0 的 SwiftUI 矩形在透明的 NSWindow 上呈现灰色矩形？

如何解决为什么不透明度为 0.0 的 SwiftUI 矩形在透明的 NSWindow 上呈现灰色矩形？

我有一个透明的 NSWindow，其中包含一个 Rectangles 的网格，其不透明度可以切换。当不透明度为 0.0 时，会呈现一个灰色矩形（见图片），我希望在其中看到一个空白区域。

我已经尝试将所有父视图中的背景颜色修改为 Color.clear（在整个代码中散落着），但怀疑原因出在其他地方 - 可能是由于透明窗口的行为方式，因为似乎也有是阴影和轮廓等。

注意：在不透明度 1.0 和 0.0 之间切换的行为略有不同，所以想知道如果不透明度 0.0？

我的目标是macOS 11.1

我的 NSWindow 是这样构造的：

class Transparentwindow: NSWindow {

    init(contentRect: NSRect,backing: NSWindow.backingStoreType,defer flag: Bool) {
        super.init(contentRect: contentRect,styleMask: [.borderless,.fullSizeContentView],backing: .buffered,defer: false)
        
        ignoresMouseEvents = true
        titlebarappearsTransparent = true
        titleVisibility = .hidden
        isOpaque = false
        backgroundColor = NSColor.clear
        level = .floating
        isMovable = false
        isReleasedWhenClosed = false
        orderFront(nil)

        toolbar?.isVisible = false
        
        // Hide the traffic icons (standard close,minimize,maximize buttons)
        standardWindowButton(.closeButton)?.isHidden = true
        standardWindowButton(.miniaturizeButton)?.isHidden = true
        standardWindowButton(.zoomButton)?.isHidden = true
        
        styleMask.insert(NSWindow.StyleMask.fullSizeContentView)
    }
}

和视图大致如下：

struct GridView : View {
    @EnvironmentObject var appStore : AppStore

    var body: some View {
        let columns: [GridItem] =
            Array(repeating: .init(.fixed(size),spacing: spacing),count: cols)
                
        LazyVGrid(columns: columns,spacing: spacing) {
            ForEach(appStore.items) { item in
                GridItemView(item: item)
                    .frame(width: size,height: size)
                    .background(Color.clear)
                    .border(Color.clear,width: 0.0)

            }
        }.padding(0)
        .fixedSize()
        .background(Color.clear)
    }
}

struct GridItemView : View {
    
    @EnvironmentObject var appStore : AppStore
    @Observedobject var item: Item
    @State var opacity = 0.5
    
    var body: some View {
        
        GeometryReader { geometry in
            Rectangle()
                .fill(Color.white)
                .onReceive(appStore.$frame) { frame in
                    let newFrame = calculateItemRect(
                        frame: frame,crop: geometry.frame(in: .global)
                    )
                    
                    if (!newFrame.equalTo(item.frame)) {
                        item.frame = newFrame
                    }
                }.onReceive(item.$toggle) { toggle in
                    if toggle {
                        opacity = 0.0
            
                        dispatchQueue.main.asyncAfter(deadline: .Now() + delay) {
                            opacity = 0.5
                            item.toggle = false
                        }
                    }
                }.opacity(opacity)
        }.background(Color.clear)
    }
}

解决方法

原来我需要在 hasShadow 实例上将 false 属性设置为 NSWindow：

class TransparentWindow: NSWindow {

        // ...
        hasShadow = false
        ignoresMouseEvents = true
        // ...
    }
}