如何在 SwiftUI 中关闭 NavigationLink 覆盖颜色？答案

【问题标题】：How to turn off NavigationLink overlay color in SwiftUI?如何在 SwiftUI 中关闭 NavigationLink 覆盖颜色？
【发布时间】：2019-12-02 07:35:52
【问题描述】：

我使用 ZStack 设计了一个“CardView”，其中背景层是渐变，前景层是 PNG（或 PDF）图像（图像是在 Adobe Illustrator 中绘制的黄色路径（如圆形）） .

当我将 ZStack 放在 NavigationLink 中时，渐变保持不变并且很好，但是图像会得到蓝色的叠加颜色（就像按钮的默认颜色），因此不再有黄色路径（路径是蓝色的）。

如何获得前景PNG（或PDF）图像的原始颜色？


import SwiftUI

struct MyCardView : View {
    let cRadius : CGFloat = 35
    let cHeight : CGFloat = 220
    var body: some View {
        NavigationView {
            NavigationLink(destination: Text("Hello")) {
                ZStack {
                    RoundedRectangle(cornerRadius: cRadius)
                        .foregroundColor(.white)
                        .opacity(0)
                        .background(LinearGradient(gradient: Gradient(colors: [Color(red: 109/255, green: 58/255, blue: 242/255),Color(red: 57/255, green: 23/255, blue: 189/255)]), startPoint: .leading, endPoint: .trailing), cornerRadius: 0)
                        .cornerRadius(cRadius)
                        .frame(height: cHeight)
                        .padding()
                    Image("someColoredPathPNGimage")
                }
            }
        }
    }
}

【问题讨论】：

标签： xcode colors navigation swiftui

【解决方案1】：

navigationLink 的作用类似于Button，它使用蓝色的默认按钮样式。

使用.renderingMode(.original) 仅适用于Image 视图。如果您决定使用一些库或 pod 加载图像怎么办？！

最好使用下面的修饰符将默认按钮样式更改为普通样式：

NavigationLink(destination: Text("Hello")) {
    ZStack {
        RoundedRectangle(cornerRadius: cRadius)
            .foregroundColor(.white)
            .opacity(0)
            .background(LinearGradient(gradient: Gradient(colors: [Color(red: 109/255, green: 58/255, blue: 242/255),Color(red: 57/255, green: 23/255, blue: 189/255)]), startPoint: .leading, endPoint: .trailing), cornerRadius: 0)
            .cornerRadius(cRadius)
            .frame(height: cHeight)
            .padding()
        Image("someColoredPathPNGimage")
    }
}
.buttonStyle(PlainButtonStyle())  // Here is what you need

【讨论】：

感谢您的提示！我不知道如何构建自定义导航按钮（使用文本和图像）。你让我开心。
非常感谢！这也让我很开心！！！

【解决方案2】：

试试：

Image("someColoredPathPNGimage").renderingMode(.original)

如果您的问题仍然存在，请考虑上传屏幕截图，以便我们了解您的意思。如果你能包含你正在使用的图像，那就更好了，这样我们就可以复制了。

【讨论】：

【解决方案3】：

将.buttonStyle(PlainButtonStyle()) 添加到 NavigationLink(....)

NavigationLink(
   destination: Text("Destination"),
   label: {
       Text("Click Here!")
   }
)
.buttonStyle(PlainButtonStyle())

【讨论】：