ios - How to navigate to a detail screen with a navigationLink containing a ZStack with some layout

Question

I am building a recipe app, and I build it as follows: first, I created in a separate struct, a basic view with an Image as background and some text on top. then I created a few horizontal ScrollViews where I embedded a view of those basic views. I want, that when a user taps on one of those views, that they go to a detail screen based on their selection. To do that I embedded all the code of the view with the image and the text inside a navigationLink. but when I run the app in the simulator, and I press on one of the views, nothing happens.

this is the code of the view with the text and image:

NavigationLink(destination: DetailView(title: titleText)) {
            ZStack {
                Image(foodImageName)
                    .resizable()
                    .renderingMode(.original)

                VStack {
                    Text(titleText)
                        .foregroundColor(Color.init(hex: "AAAAAA"))
                        .font(.system(size: 30, weight: .semibold))
                    Spacer()
                }
            }
            .frame(width: 189, height: 194)
            .cornerRadius(15)
            .shadow(color: Color.init(hex:"000000"), radius: 7,x: 7, y: 7)
        }

and this is the code of the main view:

struct ContentView: View {

    private var spacing: CGFloat = 20
    var body: some View {
        NavigationView {
            VStack {
                Text("First Course")
                    .frame(height: 36)
                    .font(.system(size: 25, weight: .semibold))

                ScrollView (Axis.Set.horizontal, showsIndicators: false){
                    HStack{
                        MenuTopicView(titleText: "Soup", foodImageName: "Soup")
                        MenuTopicView(titleText: "Fish", foodImageName: "Soup")
                    }
                }.frame(height: 200)

                Text("Main Course")
                    .frame(height: 36)
                    .font(.system(size: 25, weight: .semibold))

                ScrollView(Axis.Set.horizontal) {
                    HStack {
                        MenuTopicView(titleText: "Steak", foodImageName: "Soup")
                        MenuTopicView(titleText: "Chicken", foodImageName: "Soup")
                    }
                }

                Text("Dessert")
                    .frame(height: 36)
                    .font(.system(size: 25, weight: .semibold))

                ScrollView(Axis.Set.horizontal) {
                    HStack {
                        MenuTopicView(titleText: "Ice cream", foodImageName: "Soup")
                        MenuTopicView(titleText: "Pancakes", foodImageName: "Soup")
                    }
                }
            }
        .navigationBarTitle("Recipes")
        }
    }

}

does anybody have a suggestion on what I did wrong? thanks!

标签： iosswiftuiswiftui-navigationlink

Answer 1

I see that your main view is wrapped in a NavigationView, but none of the items in the VStack is in a NavigationLink. You can try this:

NavigationView {
    VStack {
        NavigationLink(destination: DetailView(title: titletext) {
            Text("First Course")
                .frame(height: 36)
                .font(.system(size: 25, weight: .semibold))

            ScrollView (Axis.Set.horizontal, showsIndicators: false){
                HStack{
                    MenuTopicView(titleText: "Soup", foodImageName: "Soup")
                    MenuTopicView(titleText: "Fish", foodImageName: "Soup")
                }
            }.frame(height: 200)
        }
    }
}

In order for NavigationLink to work, it must be embedded in a NavigationView.