SwiftUI - 为啥 contentShape 会阻止单击叠加层？

Posted 2023-02-24

【中文标题】SwiftUI - 为啥 contentShape 会阻止单击叠加层？

【英文标题】：SwiftUI - why does contentShape block clicking on an overlay?SwiftUI - 为什么 contentShape 会阻止单击叠加层？

【发布时间】：2021-04-19 03:27:04

【问题描述】：

这是来自真实应用的一些精简代码。我尝试使用偏移叠加来创建一个位于列表中项目旁边的小弹出窗口。我发现contentShape() 会干扰覆盖层上的tapGesture。如果我在以下示例中取消注释 .contentShape(Rectangle()) 行，您将无法再单击蓝色叠加层。

有人知道为什么吗？也许这是一个错误。我在 macOS 11.2.3 上运行它。

struct ContentView: View 
    var body: some View 
        VStack(alignment: .leading, spacing: 0) 
            OverlayTapTest()
                // .contentShape(Rectangle())
                .zIndex(1)
            Text("Line 2")
            Text("Line 3")
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    



struct OverlayTapTest: View 
    var body: some View 
        Text("OverlayTapTest - Test")
            .contentShape(Rectangle())
            .onTapGesture  print("Tapped Text") 
            .overlay(
                Text("OverlayTapTest - Overlay")
                    .contentShape(Rectangle())
                    .onTapGesture  print("Tapped Overlay") 
                    .background(Color.blue)
                    .offset(x: 20, y: 18),
                alignment:.topLeading
            )
    

【参考方案1】：

你使用onTapGesture的顺序错误，看看工作方式：

---

struct ContentView: View 
    var body: some View 
        VStack(alignment: .leading, spacing: 0) 
            OverlayTapTest()
                 .contentShape(Rectangle())
                .zIndex(1)
            Text("Line 2")
            Text("Line 3")
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    



struct OverlayTapTest: View 
    
    var body: some View 
        
        Text("OverlayTapTest - Test")
            .contentShape(Rectangle())
            .overlay(Text("OverlayTapTest - Overlay")
                    .contentShape(Rectangle())
                    .onTapGesture  print("Tapped Overlay") 
                    .background(Color.blue)
                    .offset(x: 20, y: 18),
                alignment:.topLeading)
            .onTapGesture  print("Tapped Text")    // <<: Here
            
    

【讨论】：

您的代码对我不起作用。我点击蓝色矩形，什么也没得到。然后如果我取消注释contentShape()（ContentView.body 中的那个），我可以点击蓝色。这与我的示例行为相同。

我的答案对我有用，我使用的是 Xcode：版本 12.4 (12D4e)、macOS 11.2.3 (20D91)

当您点击蓝色框时，您是否在控制台中看到“Tapped Overlay”打印？

是的，我的回答是，不是你的代码。

哇，这很奇怪。我们有相同版本的 macOS 和 Xcode，我得到不同的行为。我可以尝试重新启动系统，但是??。