如何使用 SwiftUI 消除嵌套 NavigationView 中的空间 [英] How to get rid of space in nested NavigationView with SwiftUI

问题描述

我目前正在使用 SwiftUI 为 iOS 开发一个项目.我有 3 个页面(MainMenu、CalendarList 和 DateDetails.)

Im currently working on a project for iOS using SwiftUI. I have 3 pages (MainMenu, CalendarList, and DateDetails.)

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

On the 2nd page (CalenderList) there is an empty space between the top of the screen and the actual NavigationBarTitle.

在第三页，您可以看到后退按钮(到主菜单)并且顶部有两个空格.

on the third page, you can see the back button (to the MainMenu) and there is two empty spaces at the top.

我见过有人使用 .navigationBarHidden 来解决这个问题，但我无法以解决问题的方式实现它.

I've seen people use .navigationBarHidden to fix this, but i haven't been able to implement it in a way that fixes the problem.

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

Am i using NavigationView() incorrectly? or is there a special trick?

这是 MainMenu 的代码:

Here is the code for the 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 页):

Here is the code for CalendarList (page 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 页):

And here is the code for DateDetails (page 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，您不需要在每个子屏幕中添加它，只需将其从 CalendarList 和 DateDetails 中删除即可修复您的间距问题

Only use NavigationView at the top level, you don't need to add it in every subscreen, just remove it from CalendarList and DateDetails and it will fix your spacing issue

这篇关于如何使用 SwiftUI 消除嵌套 NavigationView 中的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！