将图像的可点击部分剪辑为 NavigationLink (SwiftUI)

Question

在 NavigationLink 闭包中实现图像并剪裁该图像时，未剪裁的图像是可点击的。由于剪裁，图像相互重叠（请参阅随附的屏幕截图）。第一个屏幕截图显示了原始大小。当剪辑（第二个屏幕截图）点击红色阴影区域（如第一个屏幕截图所示）时，第二个 NavigationLink 被触发，而不是第一个。

以下代码产生问题：

var body: some View {
        NavigationView{
            ScrollView{
                VStack (spacing: 20) {
                    NavigationLink(destination: ImageGalleryView1()) {
                        Image(uiImage: downsample(imageAt: URL(string: "imageURL")!, to: CGSize(width: 500, height: 500), scale: 1))
                            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 200, alignment: .center)
                            .clipped()
                    }
                    NavigationLink(destination: ImageGalleryView2()) {
                        Image(uiImage: downsample(imageAt: URL(string: "imageURL")!, to: CGSize(width: 500, height: 500), scale: 1))
                            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 200, alignment: .center)
                            .clipped()
                    }
                    NavigationLink(destination: ImageGalleryView3()) {
                        Image(uiImage: downsample(imageAt: URL(string: "imageURL")!, to: CGSize(width: 500, height: 500), scale: 1))
                            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 200, alignment: .center)
                            .clipped()
                    }
               }
          }
}

我尝试剪辑图像，尝试剪辑 NavigationLink，尝试使用 .frame() 属性。但是没有成功。

我的目标是创建一个包含三个图像的 VStack，其中每个图像都是一个 NavigationLink。剪辑的部分不应该是可点击的。如果可能的话，我想在这种情况下避免使用按钮或形状。

Answer 1

我不知道你对 downsample(imageAt:) 的确切实现，但下面的实现消除了图像重叠：

NavigationLink(destination: ImageGalleryView1()) {
                    Image("sample-image")
                    .resizable(resizingMode: .tile)
                    .frame(minWidth: 0,
                           maxWidth: .infinity,
                           minHeight: 0,
                           maxHeight: 200,
                           alignment: .center)
                }

Answer 2

只需在 .clipped() 之前直接添加 .contentShape(Rectangle())。这为我解决了这个问题。

将图像的可点击部分剪辑为 NavigationLink (SwiftUI)

Clip clickable parts of image as NavigationLink (SwiftUI)

xcode

image

swiftui

clipped

navigationlink