web-dev-qa-db-ja.com

SwiftUIでNavigationLinkオーバーレイの色をオフにする方法は？

背景レイヤーがグラデーションで、前景レイヤーが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")
                }
            }
        }
    }
}
xcodecolorsnavigationswiftui
8
Mehdi

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

試してください：

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

問題が解決しない場合は、スクリーンショットのアップロードを検討してください。意味がわかります。使用している画像を含めることができれば、さらに良いので、複製することができます。

9
kontiki