带有嵌套导航视图的 Swift UI

Posted 2023-02-24

技术标签:

【中文标题】带有嵌套导航视图的 Swift UI【英文标题】：Swift UI with Nested Navigation Views 【发布时间】：2021-03-28 01:59:14 【问题描述】：

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

文本元素：

嵌套导航栏：

这是我的代码：

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

谢谢！

【问题讨论】：

只有父元素需要NavigationView。您应该删除所有子元素中的NavigationViews。从 SeeTestKit 中移除 NavigationView 【参考方案1】：

如前面在 cmets 中所述，您需要删除 NavigationView。而且您几乎总是希望删除子视图上的任何NavigationView。

基本上发生的事情是您将 NavViews 双重堆叠，并可能导致一些非常时髦的行为。