为什么UIVisualEffectView在上下文菜单中不起作用？

Question

我有一个相对简单的视图，并且试图在上下文菜单中使用UIVisualEffectView。

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .bottomLeading) {
            Image("Flower")
                .resizable()
                .frame(width: 200, height: 200)
            
            VStack {
                Text("Line 1")
                Text("Line 2")
            }
            .frame(width: 200, height: 50)
            .background(BlurView())
        }
        .contextMenu(ContextMenu(menuItems: {
            Text("Menu Item 1")
        }))
    }
}

struct BlurView: UIViewRepresentable {
    var style: UIBlurEffect.Style = .systemMaterial
    
    func makeUIView(context: Context) -> UIVisualEffectView {
        return UIVisualEffectView(effect: UIBlurEffect(style: style))
    }
    
    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
        uiView.effect = UIBlurEffect(style: style)
    }
}

视图加载后效果很好，但是激活上下文菜单后，整个模糊就消失了。

希望有一种解决方法，或者在解决此问题之前，我只需要使用完全不同的叠加层即可。

Answer 1

这就是 contextMenu 干扰基础视图的方式。

如果您不想要这种行为，您可以将 contextMenu 附加到一个不可见的叠加层，这样底层视图将保持不变：

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .bottomLeading) {
            Image("testImage")
                .resizable()
                .frame(width: 200, height: 200)

            VStack {
                Text("Line 1")
                Text("Line 2")
            }
            .frame(width: 200, height: 50)
            .background(BlurView())
        }
        .overlay(
            Color.clear
                .contentShape(Rectangle())
                .contextMenu(ContextMenu(menuItems: {
                    Text("Menu Item 1")
                }))
        )
    }
}