裁剪和缩放以填充 SwiftUI 图像块 NavigationLink答案

【问题标题】：Clipped and Scaled To Fill SwiftUI Image Blocks NavigationLink裁剪和缩放以填充 SwiftUI 图像块 NavigationLink
【发布时间】：2021-04-11 05:06:28
【问题描述】：

如果容器中有一个带有图像的 NavigationLink（可调整大小、缩放以填充并剪裁为更小的框架），则无法按下 NavigationLink。我假设这与图像中被“剪掉”的部分仍然实际存在并阻塞了 NavigationLink 有关。

这是一个复制行为的简短示例：

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                VStack {
                    NavigationLink(destination: Text("Hello, world!")) {
                        Text("Press me")
                    }
                }
                
                Image("background")
                    .resizable()
                    .scaledToFill()
                    .frame(height: 60)
                    .clipped()
            }
        }
    }
}

“背景”可以是资产文件夹中的任何类型的图片。

我试图弄乱 zIndexes；那没用。

有一个 hack 有效：我使用了 UIImage，通过将其转换为 CGImage 并返回为 UIImage，将其裁剪为我想要的 Image 的纵横比。之后，我可以再次按下 NavigationLink，但从我的手机滞后可以明显看出它太贵了。我试图通过将裁剪后的图像保存到文档目录来解决这个问题，然后当纵横比不够相似时，我会重新裁剪、保存并重新加载图像，但这仍然对我的项目的性能造成了影响。

请就我应该如何处理这种情况提供一些建议。提前感谢您的帮助。

【问题讨论】：

标签： swift swiftui

【解决方案1】：

这里是 zIndex 的替代项（如果视图中还存在其他活动元素） - 禁用用户与背景图像的交互

Image("background")
    .resizable()
    .scaledToFill()
    .frame(height: 60)
    .clipped()
    .allowsHitTesting(false)     // << here !!
    //.zIndex(-1)            // << also force put below siblings

【讨论】：

这是bug还是隐藏功能？
我不认为这是一个错误，视图是按顺序堆叠在另一个之上的......并且视觉可见不等于可命中测试（交互式）。在其他情况下也可能如此，例如。偏移后。

【解决方案2】：

将.zIndex(1.0) 设置为VStack 的NavigationLink。

已测试：XCode 12.2、iOS 14.1

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                VStack {
                    NavigationLink(destination: Text("Hello, world!")) {
                        Text("Press me")
                    }
                }
                .zIndex(1.0) //<--- here
                Image("ivana-cajina-_7LbC5J-jw4-unsplash")
                    .resizable()
                    .scaledToFill()
                    .frame(height: 60)
                    .clipped()
            }
        }
    }
}

【讨论】：

所以对于我项目中的具体情况，这是行不通的。我有多个模块化视图，列表中有重叠的剪切图像，因此单独设置 zIndexes 要困难得多。