SwiftUI：使用 NavigationView 导致图像和文本消失

Posted 2023-04-19

【中文标题】SwiftUI：使用 NavigationView 导致图像和文本消失

【英文标题】：SwiftUI : Using NavigationView leads to image and text gone

【发布时间】：2021-09-19 03:12:37

【问题描述】：

我要做的是.. 如果我点击一个菜单，它会转到一个详细的菜单描述页面。

但似乎有些不对劲。代码如下。

[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)")
                        
                    
                
            //
        
    

我故意注释掉了“导航视图”。 因为如果我激活与 NavigationNiew 相关的评论..

看到了吗？这似乎很奇怪。我仍然想知道我做错了什么。。 在添加导航代码之前，菜单显示在预览井上。 你能给我一些建议吗？

================================ 我的问题已经解决了！

[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())
            
        
    

【问题讨论】：

一定要删除ItemRow里面的NavigationView。这就是后退按钮的来源。

试着把NavigationLink放在ItemRow外面而不是里面

谢谢..我已经很努力了..我会尽快上传我所做的..

【参考方案1】：

一个应用中通常只有一个NavigationView。通常是最外层的View。

在这种情况下，将它放在ContentView 中的VStack 上方。

最常见的例外之一是工作表。