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

Posted

技术标签:

【中文标题】将图像的可点击部分剪辑为 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() 修饰符隐藏超出这些边缘的任何内容”。据我了解,该功能仅影响剪裁部分的可见性。如果您在视图调试器中检查您的原始代码,您会注意到图像被绘制在边界之外。 有道理。谢谢。

以上是关于将图像的可点击部分剪辑为 NavigationLink (SwiftUI)的主要内容,如果未能解决你的问题,请参考以下文章

图片的可点击区域

图像内的可点击元素 - 网络棋盘游戏

svg 剪辑图像并显示中风

Android:将图像剪辑到形状

CSS 剪辑 - 精灵图像

在图像鼠标悬停时在父 div 中显示大的可点击图像