将图像的可点击部分剪辑为 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)的主要内容,如果未能解决你的问题,请参考以下文章