如何在SwiftUI中关闭NavigationLink叠加颜色？

Question

我使用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")
                }
            }
        }
    }
}

Answer 1

该navigationLink行为像Button它得到与蓝色默认的按钮样式。

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

最好使用波纹管修饰符将默认按钮样式更改为普通样式：

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*/

Answer 2

添加.buttonStyle(PlainButtonStyle())到导航链接(....)

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

Answer 3

尝试：

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

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