JavaEar 专注于收集分享传播有价值的技术资料

How to remove the default Navigation Bar space in SwiftUI NavigiationView

I am new to SwiftUI (like most people) and trying to figure out how to remove some whitespace above a List that I embedded in a NavigationView

In this image, you can see that there is some white space above the List

Current Version

What I want to accomplish is this

Ideal Version

I've tried using

.navigationBarHidden(true)

but this did not make any noticeable changes.

i'm currently setting up my navigiationView like this

 NavigationView {
                FileBrowserView(jsonFromCall: URLRetrieve(URLtoFetch: applicationDelegate.apiURL))
                    .navigationBarHidden(true)
                }

where FileBrowserView is a view with a List and Cells defined like this

List {
   Section(header: Text("Root")){
    FileCell(name: "Test", fileType: "JPG",fileDesc: "Test number 1")

                    FileCell(name: "Test 2", fileType: "txt",fileDesc: "Test number 2")
                    FileCell(name: "test3", fileType: "fasta", fileDesc: "")
}
}

I do want to note that the ultimate goal here is that you will be able to click on these cells to navigate deeper into a file tree and thus should display a Back button on the bar on deeper navigation, but I do not want anything at the top as such during my initial view.

8个回答

    最佳答案
  1. For some reason, SwiftUI requires that you also set .navigationBarTitle for .navigationBarHidden to work properly.

    NavigationView {
        FileBrowserView(jsonFromCall: URLRetrieve(URLtoFetch: applicationDelegate.apiURL))
            .navigationBarTitle("")
            .navigationBarHidden(true)
    }
    

    Update

    As @Peacemoon pointed out in the comments, the navigation bar remains hidden as you navigate deeper in the navigation stack, regardless of whether or not you set navigationBarHidden to false in subsequent views. As I said in the comments, this is either a result of poor implementation on Apple's part or just dreadful documentation (who knows, maybe there is a "correct" way to accomplish this).

    Whatever the case, I came up with a workaround that seems to produce the original poster's desired results. I'm hesitant to recommend it because it seems unnecessarily hacky, but without any straightforward way of hiding and unhiding the navigation bar, this is the best I could do.

    This example uses three views - View1 has a hidden navigation bar, and View2 and View3 both have visible navigation bars with titles.

    struct View1: View {
        @State var isNavigationBarHidden: Bool = true
    
        var body: some View {
            NavigationView {
                ZStack {
                    Color.red
                    NavigationLink("View 2", destination: View2(isNavigationBarHidden: self.$isNavigationBarHidden))
                }
                .navigationBarTitle("Hidden Title")
                .navigationBarHidden(self.isNavigationBarHidden)
                .onAppear {
                    self.isNavigationBarHidden = true
                }
            }
        }
    }
    
    struct View2: View {
        @Binding var isNavigationBarHidden: Bool
    
        var body: some View {
            ZStack {
                Color.green
                NavigationLink("View 3", destination: View3())
            }
            .navigationBarTitle("Visible Title 1")
            .onAppear {
                self.isNavigationBarHidden = false
            }
        }
    }
    
    struct View3: View {
        var body: some View {
            Color.blue
                .navigationBarTitle("Visible Title 2")
        }
    }
    

    Setting navigationBarHidden to false on views deeper in the navigation stack doesn't seem to properly override the preference of the view that originally set navigationBarHidden to true, so the only workaround I could come up with was using a binding to change the preference of the original view when a new view is pushed onto the navigation stack.

    Like I said, this is a hacky solution, but without an official solution from Apple, this is the best that I've been able to come up with.

  2. 参考答案2
  3. The purpose of a NavigationView is to add the navigation bar on top of your view. In iOS, there are 2 kinds of navigation bars: large and standard.

    enter image description here

    If you want no navigation bar:

    FileBrowserView(jsonFromCall: URLRetrieve(URLtoFetch: applicationDelegate.apiURL))
    

    If you want a large navigation bar (generally used for your top-level views):

    NavigationView {
        FileBrowserView(jsonFromCall: URLRetrieve(URLtoFetch: applicationDelegate.apiURL))
        .navigationBarTitle(Text("Title"))
    }
    

    If you want a standard (inline) navigation bar (generally used for sub-level views):

    NavigationView {
        FileBrowserView(jsonFromCall: URLRetrieve(URLtoFetch: applicationDelegate.apiURL))
        .navigationBarTitle(Text("Title"), displayMode: .inline)
    }
    

    Hope this answer will help you.

    More information: Apple Documentation

  4. 参考答案3
  5. This is a bug present in SwiftUI (still as of Xcode 11.2.1). I wrote a ViewModifier to fix this, based on code from the existing answers:

    public struct NavigationBarHider: ViewModifier {
        @State var isHidden: Bool = false
    
        public func body(content: Content) -> some View {
            content
                .navigationBarTitle("")
                .navigationBarHidden(isHidden)
                .onAppear { self.isHidden = true }
        }
    }
    
    extension View {
        public func hideNavigationBar() -> some View {
            modifier(NavigationBarHider())
        }
    }
    
  6. 参考答案4
  7. You could extend native View protocol like this:

    extension View {
        func hideNavigationBar() -> some View {
            self
                .navigationBarTitle("", displayMode: .inline)
                .navigationBarHidden(true)
        }
    }
    

    Then just call e.g.:

    ZStack {
        *YOUR CONTENT*
    }
    .hideNavigationBar()
    
  8. 参考答案5
  9. Similar to the answer by @graycampbell but a little simpler:

    struct YourView: View {
    
        @State private var isNavigationBarHidden = true
    
        var body: some View {
            NavigationView {
                VStack {
                    Text("This is the master view")
                    NavigationLink("Details", destination: Text("These are the details"))
                }
                    .navigationBarHidden(isNavigationBarHidden)
                    .navigationBarTitle("Master")
                    .onAppear {
                        self.isNavigationBarHidden = true
                    }
                    .onDisappear {
                        self.isNavigationBarHidden = false
                    }
            }
        }
    }
    

    Setting the title is necessary since it is shown next to the back button in the views you navigate to.

  10. 参考答案6
  11. For me, I was applying the .navigationBarTitle to the NavigationView and not to List was the culprit. This works for me on Xcode 11.2.1:

    struct ContentView: View {
        var body: some View {
            NavigationView {
                List {
                    NavigationLink(destination: DetailView()) {
                        Text("I'm a cell")
                    }
                }.navigationBarTitle("Title", displayMode: .inline)
            }
        }
    }
    

    Navigation bar and list with no gap at the top

  12. 参考答案7
  13. For me it was because I was pushing my NavigationView from an existing. In effect having one inside the other. If you are coming from a NavigationView you do not need to create one inside the next as you already inside a NavigatonView.

  14. 参考答案8
  15. Try putting the NavigationView inside a GeometryReader.

    GeometryReader {
        NavigationView {
            Text("Hello World!")
        }
    }
    

    I’ve experienced weird behavior when the NavigationView was the root view.