SwiftUIのNavigationLinkで画像がグレーアウトしてしまう

Question

##起きていること

SwiftUIでscrollview水平方向におき、配置された画像を押すことで画面遷移を行いたいです。
添付した右の画像はNavigationLinkを書いていない状態のものです。NavigationLinkを書くと、左の画像のように画像がグレーアウトしてしまいます。原因はどこにあるでしょうか。

##試したこと
SwiftUIの公式チュートリアルを参考にして作っているので、サンプルコードとよく見比べました。

##ソースコード

import SwiftUI

struct Home: View {
    var categoryName: String
    var items: [colorData]
    
    var body: some View {
        VStack(alignment: .leading) {
            Text(self.categoryName)
                .font(.headline)
                .padding(.leading, 15)
                .padding(.top, 5)

            ScrollView(.horizontal, showsIndicators: false) {
                HStack(alignment: .top, spacing: 0) {
                    ForEach(self.items) { colordata in
                        NavigationLink(
                            destination: ColorCellView(
                                colorData: colordata

                            )
                        ) {
                            CategoryItem(colorData: colordata)
                        
                    }
                }
            }
            
        }
            .frame(height: 185)
    }
}
}
struct CategoryItem: View {
    var colorData: colorData
    var body: some View {
        VStack(alignment: .leading) {
            colorData.image
            .resizable()
                .frame(width: 155, height: 155)
            .cornerRadius(5)
            Text(colorData.name)
                .foregroundColor(.primary)
                .font(.caption)
        }
        .padding(.leading, 15)
    }
}

struct Home_Previews: PreviewProvider {
    static var previews: some View {
        Home(categoryName: ColorDataR[3].name, items: Array(ColorDataR.prefix(4)))
        .environmentObject(testData())
        
    }
}

Answer 1

buttonStyle を追加してみてください。
これで表示されると思います。

ForEach(self.items) { colordata in
    NavigationLink(destination: ColorCellView(colorData: colordata)) {
        CategoryItem(colorData: colordata)
    }
    .buttonStyle(PlainButtonStyle())    // 追加
}

が，全体を NavigationView {} でラップしないと遷移はしないと思います。
(あ，親ビューでラップしてるなら二重にかける必要はないです)
モーダル遷移で良ければ .sheet 使えばいいですね。

Comments

[Hyperbolic4183]

親viewをNavigationView{}で囲む & .buttonStyle(PlainButtonStyle( ))で解決しました。本当にありがとうございます！

以下詳細です。
NavigationViewで囲むことでグレーアウトではなく、画像のframeが水色で表示されるようになりました。
(画像は表示されませんが、遷移はできる状態)
.buttonStyle(PlainButtonStyle( ))で画像が表示されるようになりました。

[TakuyaAso]

想定通りですーありがとうございます。よかったです！