按钮点击触发器虽然点击下面的按钮

Question

我有以下代码。顶部有两个大按钮和下面有很多按钮的 ScrollView:

struct ContentView: View {
    var body: some View {
        VStack (spacing: 0) {
            HStack (spacing: 0) {
                Button(action: {}, label: {Image("button_background")})
                Button(action: {}, label: {Image("button_background")})
            }
            ScrollView {
                LazyVGrid(columns: [GridItem(.adaptive(minimum: 64))], spacing: 0) {
                    ForEach(1...4, id: \.self) { number in
                        Button(action: {}, label: {
                            ZStack {
                                Color(.gray)
                                Text("A").foregroundColor(.white)
                            }
                        })
                    }
                }
            }
        }
    }
}

但是，当我单击 ScrollView 中第一行中的一个按钮时，会触发上面 HStack 中的按钮。例如，请看下面的照片。我单击“A”（黑点，我无法显示光标）但上方的大按钮被触发（并变为灰色）。我该如何解决？

XCode 版本 12.3

Answer 1

您可以使用 .contentShape() 控制视图的可点击区域。

对于您的情况，您可以在 HStack 之后添加 .contentShape(Rectangle())。

按钮点击触发器虽然点击下面的按钮

Button click triggers although clicking on button below

ios

swiftui

swiftui-scrollview