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

问题描述

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

I've designed a "CardView" using ZStack in which the background layer is a gradient and the foreground layer is a PNG(or PDF) image(the image is a yellow path(like a circle) drawn in Adobe Illustrator).

当我将ZStack放在NavigationLink中时，渐变保持不变且很好，但是图像获得了蓝色的覆盖颜色（如按钮的默认颜色），因此有

When I put the ZStack inside a NavigationLink the gradient remains unchanged and fine, but the image get a bluish overlay color (like default color of a button) therefore there is no more yellow path(the path is bluish).

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

How can get the original color of foreground PNG(or PDF) image?

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")
                }
            }
        }
    }
}

推荐答案

navigationLink 就像 Button 一样，它会获得默认的蓝色按钮样式。

The navigationLink acts like Button and it gets the default button style with blue color.

使用 .renderingMode（.original）仅在 Image 视图。如果您决定使用某些库或Pod加载映像怎么办？

Using .renderingMode(.original) works only on Image views. what if you decide to load your Image using some libs or pods?!

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

It is better to change the default button style to plain using the bellow modifier:

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

这篇关于如何在SwiftUI中关闭NavigationLink叠加颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！