背景レイヤーがグラデーションで、前景レイヤーがPNG(またはPDF)画像(画像はAdobe Illustratorで描かれた黄色のパス(円のような)です)であるZStackを使用して "CardView"を設計しました。
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")
}
}
}
}
}
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*/
試してください:
Image("someColoredPathPNGimage").renderingMode(.original)
問題が解決しない場合は、スクリーンショットのアップロードを検討してください。意味がわかります。使用している画像を含めることができれば、さらに良いので、複製することができます。