2

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!

4

3 回答 3

0

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.

于 2020-01-17T22:01:55.333 回答
0

@eatyourpotato this is the code I have, it was too long for a comment, so here it is:

    var body: some View {
        NavigationView {

            NavigationLink(destination: RecipeView(recipeName: 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)
            }
        }
    }
于 2020-01-20T12:13:03.510 回答
0

You should wrap every MenuTopicView in its separate NavigationLink and add it to your ContentView in order for it to work, because they all have their own individual destinations. So like this:

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

I would suggest to make more generic Views so you don't have to repeat yourself. Something like this:

struct ContentView: View {
    let sections: [MenuSection]

    private var spacing: CGFloat = 20
    var body: some View {
        NavigationView {
            VStack {
                ForEach(sections, id: \.self) { section in
                    MenuSectionView(sectionTitle: section.title, items: section.items)
                }

            }
            .navigationBarTitle("Recipes")
        }
    }
}

struct MenuSectionView: View {
    let sectionTitle: String
    let items: [MenuItem]

    var body: some View {
        VStack {
            Text(sectionTitle)
                .frame(height: 36)
                .font(.system(size: 25, weight: .semibold))
            ScrollView (Axis.Set.horizontal, showsIndicators: false) {
                HStack {
                    ForEach(items, id: \.self) { item in
                        NavigationLink(destination: RecipeView(recipeName: item.title)) {
                            MenuTopicView(titleText: item.title, foodImageName: item.image)
                        }
                    }
                }
            }.frame(height: 200)
        }
    }
}
于 2020-01-21T10:58:20.077 回答