SwiftUI 裁剪图片后被裁剪部分仍然可以点击的解决办法

图片裁剪前

struct TestView:View {
    @State var count = 0

    var body: some View {
        Image(systemName: "cube")
        .resizable()
        .scaledToFill()
        .frame(width: 200, height: 200)
        // .clipped()
        .onTapGesture {
            print("tapped mainContainer\(count)\n")
            count += 1
        }
    }
}

去掉 .clipped() 注释后:

但是被裁剪掉的部分仍然可以触发点击事件。解决办法，添加 .contentShape(Rectangle())：

struct TestView:View {
    @State var count = 0

    var body: some View {
        Image(systemName: "cube")
        .resizable()
        .scaledToFill()
        .frame(width: 200, height: 200)
        .clipped()
				.contentShape(Rectangle())
        .onTapGesture {
            print("tapped mainContainer\(count)\n")
            count += 1
        }
    }
}