ZStack 中的手势屏蔽按钮

Question

我在 ZStack 中的矩形中添加了一个手势。我有一个 VStack，它是按钮的视图或菜单。当我将手势添加到 Rectangle 时（因为我需要检测菜单按钮后面那个视图上的点击），按钮无法接收来自设备用户的交互。我在按钮后面有一个矩形，它们确实显示在矩形上方。在模拟器上它工作得很好但在设备上它没有。社区将不胜感激任何帮助。谢谢！

var body: some View {
        ZStack {
            Rectangle()
                .foregroundColor(Color.black.opacity(0.01))
                .gesture(DragGesture(minimumDistance: 0)
                    .onChanged({ (value) in
                    self.store.tapped = true
                }))
            VStack(alignment: .leading, spacing: 0) {
                //menu buttons
                HStack(alignment: .center, spacing: 18.5) {
                    someView()
                        .environmentObject(self.anotherStore)
                        .frame(width: 145, height: 22)
                    self.otherSubviews()
                }
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 37, alignment: .leading)
                .padding(EdgeInsets(top: 0, leading: 6, bottom: 0, trailing: 6))
                //menu detail view
                self.detailView()
                }
            .padding(EdgeInsets(top: 6, leading: 6, bottom: 6, trailing: 12))
        }
    }

我已经尝试将矩形的 .zIndex 更改为 -1，菜单视图的设置更高。它不会改变任何东西

我希望 Rectangle 接收来自用户的交互（点击），并且按钮的 VStack 也将接收来自用户的交互。

Answer 1

发现背景中的视图具有手势，您需要确保其他视图具有 .contentShape(Specify A Shape)。

Apple 文档中指出

    /// Returns a new view that defines the content shape for
    /// hit-testing `self` as `shape`.

我将 .contentShape(Rectangle()) 添加到 VStack，它允许点击按钮的菜单视图以及允许点击背景中的矩形视图。

更新代码和答案

var body: some View {
        ZStack {
            Rectangle()
                .foregroundColor(Color.black.opacity(0.01))
                .gesture(DragGesture(minimumDistance: 0)
                    .onChanged({ (value) in
                    self.store.tapped = true
                }))
            VStack(alignment: .leading, spacing: 0) {
                //menu buttons
                HStack(alignment: .center, spacing: 18.5) {
                    someView()
                        .environmentObject(self.anotherStore)
                        .frame(width: 145, height: 22)
                    self.otherSubviews()
                }
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 37, alignment: .leading)
                .padding(EdgeInsets(top: 0, leading: 6, bottom: 0, trailing: 6))
                //menu detail view
                self.detailView()
                }.contentShape(Rectangle()) //Define a tappable area
            .padding(EdgeInsets(top: 6, leading: 6, bottom: 6, trailing: 12))
        }
    }

ZStack 中的手势屏蔽按钮

Gesture blocking buttons in ZStack

gesture

swift

swiftui