如何在 SwiftUI 中关闭 NavigationLink 覆盖颜色? [英] How to turn off NavigationLink overlay color in SwiftUI?

问题描述

我使用 ZStack 设计了一个CardView"，其中背景层是渐变，前景层是 PNG(或 PDF)图像(图像是在 Adob​​e 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?!

最好使用 bellow 修饰符将默认按钮样式更改为普通样式:

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 覆盖颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！