如何使用 SwiftUI 消除嵌套 NavigationView 中的空间

Posted 2023-02-24

【中文标题】如何使用 SwiftUI 消除嵌套 NavigationView 中的空间

【英文标题】：How to get rid of space in nested NavigationView with SwiftUI

【发布时间】：2020-07-03 21:14:06

【问题描述】：

我目前正在开发一个使用 SwiftUI 的 ios 项目。我有 3 页（MainMenu、CalendarList 和 DateDetails。）

在第二页（CalenderList）上，屏幕顶部和实际的 NavigationBarTitle 之间有一个空白区域。

在第三页，您可以看到返回按钮（到 MainMenu）并且顶部有两个空格。

我看到人们使用 .navigationBarHidden 来解决此问题，但我无法以解决问题的方式实施它。

我是否错误地使用了 NavigationView()？还是有什么特别的技巧？

这是 MainMenu 的代码：

import SwiftUI

struct MainMenu: View 
    var body: some View 
        NavigationView 
            VStack 
                Text("Calendar")
                    .font(.largeTitle)
                    .fontWeight(.heavy)
                    .foregroundColor(Color(red: 0.055, green: 0.173, blue: 0.322))
                    .padding(.top, 55.0)
                Text("Main Menu")
                    .font(.headline)
                    .foregroundColor(Color(red: 0.635, green: 0.635, blue: 0.635, opacity: 1.0))
                
                /*Image("Logo")
                    .resizable()
                    .frame(width: 150.0, height: 150.0)*/

                Spacer()
                
                HStack 
                    NavigationLink(destination: CalendarList()) 
                        Image(systemName: "calendar")
                            .resizable()
                            .frame(width: 75.0, height: 75.0)
                            .padding()
                            
                            
                    
                    
                    NavigationLink(destination: CalendarList()) 
                        Image(systemName: "gear")
                            .resizable()
                            .frame(width: 75.0, height: 75.0)
                            .padding()
                    
                    
                
                
                
                
                HStack 
                    NavigationLink(destination: StudentInfo()) 
                        Image(systemName: "info.circle")
                            .resizable()
                            .frame(width: 75.0, height: 75.0)
                            .padding()
                    
                    
                    NavigationLink(destination: CalendarList()) 
                        Image(systemName: "exclamationmark.circle")
                            .resizable()
                            .frame(width: 75.0, height: 75.0)
                            .padding()
                    
                
                
                Spacer()
            
        
        
    

这是 CalendarList 的代码（第 2 页）：

import SwiftUI

struct CalendarList: View 
    var body: some View 
        NavigationView 
            List(calendarData, id: \.date)  Calendar in
                
                if Calendar.collab 
                    NavigationLink(destination: DateDetails(calendar: Calendar)) 
                        CalendarRow(calendar: Calendar)
                    
                 else 
                CalendarRow(calendar: Calendar)
                
            
            .navigationBarTitle(Text("Schedule"))
        
        
    

这是 DateDetails 的代码（第 3 页）：

import SwiftUI

struct DateDetails: View 
    var calendar: Calendar
    
    var body: some View 
        NavigationView 
            VStack (alignment: .center) 
                //Image("Logo")
                
                    
                HStack 
                    Text(calendar.month.prefix(4) + ".")
                        .font(.largeTitle)
                    Text(String(calendar.date).suffix(1))
                        .font(.largeTitle)
                    
                    Spacer()
                
                
                HStack 
                    Text(calendar.schedule)
                        .font(.title)
                    Spacer()
                
                
                Spacer()
                    .frame(height: 30.0)
                
                Text(calendar.info)
                    .font(.body)
                
                Spacer()
            
            .navigationBarTitle(String(calendar.date).prefix(4).suffix(2) + "/" + String(calendar.date).suffix(2))
                
            .padding()
        
        
    

【问题讨论】：

每个导航堆栈只能使用 一个 NavigationView。无需嵌套它们。

【参考方案1】：

只在顶层使用 NavigationView，您不需要在每个子屏幕中添加它，只需将其从 CalendarList 和 DateDetails 中删除即可解决您的间距问题

【讨论】：

谢谢！我不知道。我删除了除 MainMenu NavigationViews 之外的所有内容，它就像我想要的那样工作得很好。

当您可能已经导航到 tabview 时，这将如何应用？似乎没有在标签中显示标题。

【参考方案2】：

我认为你可以删除 DateDetails 的 NavigationView。

如果您想更改导航栏，您可能需要编辑 navigationBarItems 或将 navigationBarHidden 更改为 true 并对其进行自定义。

https://www.hackingwithswift.com/quick-start/swiftui/how-to-add-bar-items-to-a-navigation-view