Swiftui 当一个元素在另一个元素后面时，快捷键单击

我有一个文本和一些在滚动视图中的框。它们都是可点击的

按钮

问题是：

• 当我点击左图中的“按钮”时，我会看到控制台日志“文本点击”。（一切正常）
• 然而，如果我向下滚动一点，在第二张图片上点击“按钮”，它实际上会点击后面的框，我会看到控制台日志“框点击”

出于某种原因，我最终点击了后面的视图，而不是前面的视图。这是一个错误还是我做错了什么

下面是再现错误的代码。我使用的是Xcode 12

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, world!").font(.largeTitle)
                .padding(.bottom, 150)
            
            HStack{
                Button(action: { print("text click") }) {
                    Text("TEXT")
                }
            }
            
            ScrollView {
                VStack {
                    HStack {
                        Button( action: {print("box click")}) {
                            Rectangle()
                                .frame(width: 150, height: 150)
                        }
                        Button( action: {print("box click")}) {
                            Rectangle()
                                .frame(width: 150, height: 150)
                        }
                    }
                    HStack {
                        Button( action: {print("box click")}) {
                            Rectangle()
                                .frame(width: 150, height: 150)
                        }
                        Button( action: {print("box click")}) {
                            Rectangle()
                                .frame(width: 150, height: 150)
                        }
                    }
                    HStack {

                        Button( action: {print("box click")}) {
                            Rectangle()
                                .frame(width: 150, height: 150)
                        }
                        Button( action: {print("box click")}) {
                            Rectangle()
                                .frame(width: 150, height: 150)
                        }
                    }
                }
            }
        }
    }
}

---

将剪辑添加到滚动视图中，如

ScrollView {
   // ... other content here
}
.contentShape(Rectangle())
.clipped()