VStack inside NavigationLink-CodePudding

I am trying to VStack an Image and a Text inside a NavigationLink.

This is my code:

NavigationLink(destination: ContentView()){
    Circle()
        .fill(Color.green)
        .frame(width: 50, height:50)
        .overlay(Image(systemName: "arrow.up"))
    Text("Send")
        .foregroundColor(Color.white)
}

VStack {
if item.title == "Send"{
    NavigationLink(destination: ContentView()) {
        VStack {
            Circle()
                .fill(Color.green)
                .frame(width: 50, height:50)
                .overlay(Image(systemName: "arrow.up"))
            Text("Send")
                .foregroundColor(Color.black)
        }
    }
}}

If I try to VStack inside the NavigationLink then nothing would compile.
If I try to VStack everything, then the image and the text would still show next to each other.
I am trying to achieve the right example:

CodePudding user response：

I wasn't able to replicate your issue. The following compiles and displayed as desired.

VStack {
    NavigationLink(destination: ContentView()) {
        VStack {
            Circle()
                .fill(Color.green)
                .frame(width: 50, height:50)
                .overlay(Image(systemName: "arrow.up"))
            Text("Send")
                .foregroundColor(Color.white)
        }
    }
}

CodePudding user response：

This should work

struct ContentView: View {
    var body: some View {
        
        NavigationView {
            NavigationLink(destination: Text("new View")) {
                ZStack {
                    Circle()
                        .fill(Color.green.opacity(0.7))
                        .frame(width: 70, height: 70)
                    
                    VStack {
                        Image(systemName: "square.and.arrow.up")
                            .renderingMode(.template)
                            .foregroundColor(.white)
                        Text("send")
                            .foregroundColor(.white)
                    }
                    
                }
            }
        }
    }
}