如何用SwiftUI保持一个子视图的剪切内容不阻碍底层子视图的手势？

Question

我有一个主视图，由一个zStack组成，底部是背景图片，上面是用户加载的图片，顶部是两个工具栏。工具栏在视图的垂直顶部和底部。我希望这些工具栏的背景图像是半透明的，其大小和位置与主视图的背景图像相匹配。如果用户拖动或缩放他们的图像与工具栏重叠，它应该被工具栏遮挡。为了达到这个目的，我将这些工具栏视图构建为zStacks，并分别将相同的背景图像对齐到顶部或底部，并剪切内容以匹配工具栏的高度。

我的问题是，这些工具栏视图的剪切内容会阻止用户加载的底层图像上的手势。为了帮助可视化这个问题，我链接了主视图（MockScoringView）的调试视图层次结构的截图。

这是主视图的代码。

GeometryReader { geometry in
            ZStack {

                Rectangle()
                    .foregroundColor(.blue)
                    .frame(width: geometry.size.width, height: geometry.size.height)
                    .offset(x: self.baseOffset.width + self.newOffset.width, y: self.baseOffset.height + self.newOffset.height)
                    .scaleEffect(self.scale)
                    .gesture(DragGesture()
                        .onChanged { value in
                                self.newOffset.width = value.translation.width / self.scale
                                self.newOffset.height = value.translation.height / self.scale
                        }
                        .onEnded { value in
                                self.baseOffset.width += self.newOffset.width
                                self.baseOffset.height += self.newOffset.height
                                self.newOffset = CGSize.zero
                        }
                    )

                VStack(spacing: 0) {
                    MockTopToolbarView()

                    Spacer()

                    MockBottomToolbarView()
                }
            }
        }

还有最上面的工具栏视图的代码 和最下面的那个非常相似。

ZStack {
            Image("Background")
                .resizable()
                .scaledToFill()
                .frame(height: 56, alignment: .top)
                .clipped()

            Rectangle()
                .foregroundColor(.toolbarGray)
                .frame(height: 56)
        }

我想修改工具条视图的背景内容 这样它们就不会阻挡手势到达用户加载的图片。

调试视图层次结构

Answer 1

你可以设置 allowsHitTesting(false) 的背景图片上。

另外，由于您不希望用户图像在工具栏后面可见，您也可以直接将矩形和工具栏添加到一个VStack中。

ZStack {
    Image("Background")
            .resizable()
            .scaledToFill()
    VStack {
        TopToolBar()
        Rectangle()
            .foregroundColor(.blue)
            ...
        BottomToolBar()
    }
}