SwiftUI : Using NavigationView leads to image and text gone

Question

What I'm gonna do is.. If I click a menu, then it goes to a detailed menu-description page.

but It seems to something wrong. the code is the below.

[contentview.swift]

var body: some View {
        VStack(alignment:.leading){
            List{
                Text("Menu")
                    .font(.title)
                    .fontWeight(.heavy)
                ForEach(menu){ section in
                    Section(header: Text(section.name) , content: {
                        ForEach(section.items.indices)
                        {
                            index in ItemRow(item:section.items[index])
                        }
                    })
                }
            }.listStyle(GroupedListStyle())
        }
    }

[ItemRow.swift]

struct ItemRow: View {
    let item: MenuItem
    var body: some View {
        VStack{
            //NavigationView{
                NavigationLink(destination: ItemDetail(item:item)) {
                    HStack{
                        Image(item.thumbnailImage)
                        VStack(alignment:.leading){
                            Text(item.name)
                                .font(.headline)
                            Text("$\(item.price)")
                        }
                    }
                }
            //}
        }
    }
}

I intentionally commented out the 'NaviagationView'. because If I activate that comment relating to NavigationNiew..

See? It seems weird. I still wonder what i did wrong.. Before adding the navigation code, the menu was shown on the Preview well. Could you give me some tips?

===============================
My Problem has been solved!

[ContentView.swift]

struct ContentView: View {
    var body: some View {
            ItemList()
    }
}

[ItemList.swift]

struct ItemList: View {
    var body: some View {
        NavigationView{
            VStack(alignment:.leading){
                List{
                    Text("Menu")
                        .font(.title)
                        .fontWeight(.heavy)
                    ForEach(menu){ section in
                        Section(header: Text(section.name) , content: {
                            ForEach(section.items.indices)
                            {
                                index in
                                //ItemRow(item:section.items[index])
                                
                                NavigationLink(destination: ItemDetail(item:section.items[index])) {
                                    HStack{
                                        Image(section.items[index].thumbnailImage)
                                        VStack(alignment:.leading){
                                            Text(section.items[index].name)
                                                .font(.headline)
                                            Text("$\(section.items[index].price)")
                                        }
                                    }
                                }
                                
                            }
                        })
                    }
                }.listStyle(GroupedListStyle())
            }
        }
    }
}

Answer 1

There is usually only one NavigationView in an app. It is usually the outer most View.

In this case put it above the VStack in the ContentView.

One of the most common exceptions are sheets.