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

Posted 2023-02-23

【中文标题】将图像的可点击部分剪辑为 NavigationLink (SwiftUI)

【英文标题】：Clip clickable parts of image as NavigationLink (SwiftUI)

【发布时间】：2019-10-25 12:28:12

【问题描述】：

在 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()-properties 进行播放。但没有成功。

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

【参考方案1】：

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

【讨论】：

你真的救了我的命！完美运行！

【参考方案2】：

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

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

【讨论】：

另外一个问题：您（或其他任何人）是否知道，为什么 'clipped()' 方法不起作用？为什么图片的不可见部分仍然可以点击？

当您查看 clipped() 的文档时，您会发现“使用 clipped() 修饰符隐藏超出这些边缘的任何内容”。据我了解，该功能仅影响剪裁部分的可见性。如果您在视图调试器中检查您的原始代码，您会注意到图像被绘制在边界之外。

有道理。谢谢。