I am building a recipe app in SwiftUI. I have created the home screen with a few lists of a view which I created in a separate file. (see picture, I don't have all the images yet, so I have the same image for all views)
I want to embed the view inside a navigationLink so that when a user tapped on A dish, that it will go to a detail screen. this is the code I have:
struct MenuTopicView: View {
var titleText: String
var foodImageName: String
var body: some View {
NavigationLink(destination: RecipeView(recipeName: titleText)) {
ZStack {
Image(foodImageName)
.resizable()
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)
}
}
}
but when I run that, I get this:
this is the code of the main view, where I create that layout:
struct ContentView: View {
private var spacing: CGFloat = 20
var body: some View {
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")
}
}
}
}
}
I googled this for a while, and I didn't succeed getting a answer to this question. does anybody have any suggestions?
Thanks!
BSM
