使 SwiftUI 点按在剪切时不会超出边界

Question

点击超出裁剪视图边界的注册。

SwiftUI 似乎会在另一个视图内以全宽和全高布局图像，以为其提供纵横填充的填充模式。这很好，但是如果我想向视图添加点击动作，即使被裁剪，点击也会在视图边界之外注册。我可能做错了，或者可能有另一种方式。除了这段代码，我还尝试使用矩形的 .clippedShape 和 .contentShape 。我如何将它带到剪辑框架外的点击不会在底层图像上注册的地方。要重现切换到剪辑并点击图像将占据剪辑视图框架之外的区域。

import SwiftUI

struct ImageContainer : View {
    var body: some View {
        Image(systemName: "cube")
        .resizable()
        .scaledToFill()
        .clipped()
    }
}

struct ContentView: View {
    @State var isClipped = false
    @State var count = 0

    var body: some View {
        VStack{
            Toggle(isOn: $isClipped) {
                Text("Clip It ")
                .font(.title)
            }.frame(width: 175)
            ZStack{
                if self.isClipped == true{
                    ImageContainer()
                        .frame(width: 200, height: 200)
                        .contentShape(Rectangle())
                        .clipped()

                        .background(Color.blue)
                        .onTapGesture {
                            print("tapped mainContainer\(self.count)\n")
                            self.count += 1
                        }
                }else{
                    ImageContainer()
                        .frame(width: 200, height: 200)
                        .background(Color.blue)
                         .onTapGesture {
                            print("tapped mainContainer\(self.count)\n")
                            self.count += 1
                    }
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 1

我在控制可点击区域的图像上使用 .contentShape(Rectangle()) 取得了成功。

您可以尝试使用 ZIndex 以便周围的视图捕获命中。但是我的结果好坏参半，AFAIK 从 iOS 14.1 开始也被窃听了