如何在 SwiftUI 中关闭 NavigationLink 覆盖颜色?
How to turn off NavigationLink overlay color in SwiftUI?
我用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")
}
}
}
}
}
尝试:
Image("someColoredPathPNGimage").renderingMode(.original)
如果您的问题仍然存在,请考虑上传屏幕截图,以便我们了解您的意思。如果你能包括你正在使用的图像,那就更好了,这样我们就可以复制了。
navigationLink
的作用类似于 Button
,它获得了蓝色的默认按钮样式。
使用 .renderingMode(.original)
仅适用于 Image
视图。如果您决定使用一些库或 pods 加载图像怎么办?!
最好使用以下修饰符将默认按钮样式更改为普通样式:
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
将 .buttonStyle(PlainButtonStyle())
添加到 NavigationLink(....)
NavigationLink(
destination: Text("Destination"),
label: {
Text("Click Here!")
}
)
.buttonStyle(PlainButtonStyle())
我用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")
}
}
}
}
}
尝试:
Image("someColoredPathPNGimage").renderingMode(.original)
如果您的问题仍然存在,请考虑上传屏幕截图,以便我们了解您的意思。如果你能包括你正在使用的图像,那就更好了,这样我们就可以复制了。
navigationLink
的作用类似于 Button
,它获得了蓝色的默认按钮样式。
使用 .renderingMode(.original)
仅适用于 Image
视图。如果您决定使用一些库或 pods 加载图像怎么办?!
最好使用以下修饰符将默认按钮样式更改为普通样式:
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
将 .buttonStyle(PlainButtonStyle())
添加到 NavigationLink(....)
NavigationLink(
destination: Text("Destination"),
label: {
Text("Click Here!")
}
)
.buttonStyle(PlainButtonStyle())