swiftswiftui-navigationlinkswiftui-button

Why is my NavigationLink grey, SwiftUI, Mac OS


Why is my Cell Grey when I wrap it into a NavigationLink like that?

NavigationLink(
                destination: Einstellungen_Daten(),
                label: {
                    EinstellungenKachel(titel: "Daten", beschreibung: "In dieser Sektion der Einstellungen kannst du alles rund um deine Daten konfigurieren", bild: Image(systemName: "folder")).buttonStyle(PlainButtonStyle())
                }).buttonStyle(PlainButtonStyle())

This Link looks like that:

Greyed Link

If I don't wrap EinstellungenKachel into a NavigationLink, it looks like this:

Normal View

The Code for EinstellungenKachel is like this:

struct EinstellungenKachel: View {
    
    var titel: String
    var beschreibung: String
    var bild: Image
    
    var body: some View {
        ZStack{
            Color.gray
                .frame(width: 450, height: 450)
                .cornerRadius(45)
            LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .leading, endPoint: .trailing)
                .mask(bild.font(.system(size: 350)))
            RoundedRectangle(cornerRadius: 0)
                .foregroundColor(Color.init(red: 0, green: 0, blue: 0, opacity: 0))
                .overlay(textOverlay, alignment: .leading)
                .cornerRadius(45)
        }.frame(width: 450, height: 450)
        .padding()
    }
    
    var textOverlay: some View {
        VStack{
            Text(titel)
                .font(.custom("Impact", size: 50))
                .padding()
            Text(beschreibung)
                .font(.custom("Impact", size: 25))
                .multilineTextAlignment(.center)
                .padding()
        }
    }
}

Can please someone help me? Thanks, Boothosh.


Solution

  • You are missing the NavigationView.

    Consider this example which doesn't work:

    struct ContentView: View {
        var body: some View {
            NavigationLink("NavigationLink", destination: Text("Destination"))
        }
    }
    

    Adding NavigationView around it, the NavigationLink will now be highlighted to indicate it is no longer disabled - since it can actually be tapped to navigate to some destination:

    struct ContentView: View {
        var body: some View {
            NavigationView {
                NavigationLink("NavigationLink", destination: Text("Destination"))
            }
        }
    }
    
    Without NavigationView With NavigationView
    without with