Swift UI 具有嵌套导航视图

Question

我也是 SwiftUI 和 Stack Overflow 的新手，所以非常感谢您的帮助。我目前正在制作一个具有嵌套导航视图的应用程序。但是，我遇到的一个问题是，当我使用这些嵌套视图时，导航标题（例如后退按钮）在彼此下方排列，形成一个相当高的导航栏。我查看了 link 并且它使用了一个列表，但我不希望我的应用程序采用这种格式。我想使用以不同颜色和字体大小格式化的文本元素（请参阅随附的屏幕截图），但是，这个线程只有这个列表功能，而不是我想要的格式。请帮我弄清楚如何摆脱这些额外的导航栏！

文本元素：

嵌套导航栏：

这是我的代码：

import SwiftUI

struct ContentView: View {
    var body: some View {
            
            NavigationView {
                
                ZStack {
                   
                    Image("img6").resizable().aspectRatio(contentMode: .fill).ignoresSafeArea()
                VStack {
                    
                    Text("SLED").font(.largeTitle).fontWeight(.heavy).padding().background(Color.blue).cornerRadius(10.0)
                    Spacer()
                    Text("Shelf Life Expiry Date Tracker").font(.title).fontWeight(.bold)
                       
                        
                    Spacer()
                    
                    ZStack {
                    Image(systemName: "cloud")
                        .padding()
                        .font(.system(size: 90))
                       
                    //try to fix this
                    //Image("logo1")
                        
                    Image(systemName: "clock.fill")
                            .padding()
                        .font(.system(size: 40))
                    }
                    
                        
                                                                                             
                    
                                     NavigationLink(destination: SeeTestKit()) {
                                        Text("See Test Kit")
                                    }.foregroundColor(Color(red: 0.0, green: 0.0, blue: 0.0))
                                               .padding(20)
                                               .background(Color.pink)
                                                .cornerRadius(10.0)
                                                   //Spacer()
                                                                        
                           HStack {
                               Spacer()
                               Image(systemName: "bag")
                                       .padding()
                                   .font(.system(size: 40))
                               Spacer()
                               Image(systemName: "alarm.fill")
                                       .padding()
                                   .font(.system(size: 40))
                               Spacer()
                               Image(systemName: "calendar")
                                       .padding()
                                   .font(.system(size: 40))
                               Spacer()
                            }
                }
                }                    
                }
    }
           
 }
    
        
    


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}```

```import SwiftUI

struct SeeTestKit: View {
    var body: some View {
        
        
        
        NavigationView {
            ZStack {
               
                Image("background2")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .ignoresSafeArea()
        VStack {
            Spacer()
        Image("testkit")
            .resizable()
            .aspectRatio(contentMode: .fit)
            Spacer()
        
        Text("The test kit serves as a supplement to the SLED Tracking System.")
            .font(.title)
            .multilineTextAlignment(.center)
            Spacer()
            Text("The test kit make the observation process more efficient by not requiring you to find your own materials.")
                .font(.title2)
                .multilineTextAlignment(.center)
            Spacer()
            Text("It also serves as an alternative to \npeople who may not have access \nto the technology required for the app.").font(.title2).multilineTextAlignment(.center)
            Spacer()
        
            Group {
            NavigationLink(destination: TestKitMaterials()) {
                Text("Materials")
                            }.foregroundColor(Color(red: 0.0, green: 0.0, blue: 0.0))
                    .padding(20)
                    .background(Color.blue)
                   .cornerRadius(10.0)
            .navigationBarTitle("Test Kit", displayMode: .inline).padding()
            
                Spacer()
            }
        }
        }
        }
    }
}

struct SeeTestKit_Previews: PreviewProvider {
    static var previews: some View {
        SeeTestKit()
    }
}```

```import SwiftUI

struct TestKitMaterials: View {
    var body: some View {
        ZStack {
           
            Image("bckgrd")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .ignoresSafeArea()
            
        VStack {
            
            Text("Test Kit Materials")
                .font(.title)
                .fontWeight(.bold)
                .foregroundColor(Color.white)
                .padding(.all, 9.0)
                .background(Color(red: 0.5, green: 0.6, blue: 0.9, opacity: 1.0)) .cornerRadius(10.0)
            
            //FIX this
            //Text("Safety Glasses").bold()
            Spacer()
            Group {
            Spacer()
            Text("Safety glasses were included to prevent \ncontamination or illness from \npotentially spoiled foods.")
                .multilineTextAlignment(.center)
                .padding(.all, 3.0)
                
            Text("A thermometer was included to test \ntemperature of foods to test for spoilage \nat a certain temperature.")
                .multilineTextAlignment(.center)
            .padding()
            }
            Group {
            Text("pH strips were used to test the pH of \nthe milk and eggs.")
                .multilineTextAlignment(.center)
            .padding()
            Text("The flashlight and ruler are included for \nthe user to measure the width of the air\n sac of the egg in a dark room.")
                .multilineTextAlignment(.center)
            .padding()
            }
            Group {
            Text("A pipette is needed to extract samples \nof the food to test certain characteristics.")
                .multilineTextAlignment(.center)
            .padding()
            Text("The test tube provides a separate vessel \nto hold the milk to make observations.")
                .multilineTextAlignment(.center)
            .padding()
            Text("A checklist is included as a guideline for the \nuser to measure characteristics and to\n measure spoilage in the absence of the app.")
                .multilineTextAlignment(.center)
            .padding()
            }
            
            Spacer()
            
            Image(systemName: "img")
                .resizable()
                .aspectRatio(contentMode: .fit)

            
        }
        }
    }
}

struct TestKitMaterials_Previews: PreviewProvider {
    static var previews: some View {
        TestKitMaterials()
    }
}```

谢谢！

Answer 1

正如前面评论中所述，您需要删除 NavigationView。几乎总是您想要删除子视图中的任何 NavigationView。

基本上发生的事情是您将 NavView 堆叠在一起，这可能会导致一些非常奇怪的行为。

Swift UI 具有嵌套导航视图

Swift UI with Nested Navigation Views

swift

swiftui

swiftui-navigationview