So entfernen Sie den Standardbereich der Navigationsleiste in SwiftUI NavigiationView

83

Ich bin neu in SwiftUI (wie die meisten Leute) und versuche herauszufinden, wie man Leerzeichen über einer Liste entfernt, die ich in eine Navigationsansicht eingebettet habe

In diesem Bild sehen Sie, dass sich über der Liste ein Leerraum befindet

Aktuelle Version

Was ich erreichen möchte, ist dies

Ideale Version

Ich habe es versucht

.navigationBarHidden(true)

Dies machte jedoch keine nennenswerten Änderungen.

Ich richte gerade meine Navigationsansicht so ein

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

Dabei ist FileBrowserView eine Ansicht mit einer Liste und Zellen, die wie folgt definiert sind

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.

Vapidant
quelle

Antworten:

132

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.

graycampbell
quelle
5
This fixed my issue! That is very strange that you have to have a title before you can hide the navigation bar...
Vapidant
5
The bug is still there outside of beta :/
Daniel Ryan
1
@Peacemoon I didn't notice that before. All in all, it feels like the implementation from Apple is pretty sloppy here. You shouldn't have to set the title just to hide the bar to begin with, and setting navigationBarHidden to false on the next view should unhide the navigation bar, but it doesn't. I ultimately got fed up with just how poorly documented SwiftUI was and went back to UIKit, and the fact that at least 20 people came here just to learn how to hide the navigation bar speaks pretty poorly for Apple's implementation and/or documentation. Sorry I don't have a better answer for you.
graycampbell
2
@SambitPrakash I’ve never really nested a TabView inside a NavigationView before, and Apple doesn’t seem to nest them that way in their apps as far as I can tell. It’s never been completely clear to me if nesting a TabView inside a NavigationView is intended to be done at all, and I know that SwiftUI has had some weird bugs that pop up when you nest them that way. TabViews have always felt like a higher level form of navigation than NavigationViews to me. If you instead nest the NavigationView inside the TabView, I believe my workaround should still work.
graycampbell
2
@kar It’s disappointing that this answer is still getting attention and upvotes. I wrote it as a temporary solution to what should have been a temporary bug. I have not tested it recently, but obviously there are plenty of problems with it. Several people have also asked if you can navigate between views without using a NavigationView. The answer is yes, but you’d essentially have to write your own NavigationView from scratch. You can’t just magically navigate between views. Something has to manage those views and provide transitions between them which is why we have NavigationView.
graycampbell
17

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

TheFlow_
quelle
26
There are reasons why you might want to hide the navigation bar while also maintaining the functionality of a NavigationView. The purpose of a NavigationView is not solely to display a navigation bar.
graycampbell
6
I want the NavigiationView for the functionality of navigating in the stack and having the ability to go back from views easily, I don't need a navigiationBar on the initial view.
Vapidant
2
Is there a way to navigate through views without navigationView?
user1445685
Basically. No. Not yet on swiftui at least
Gustavo Parrado
This answer isn't helpful as having a NavigationView is impact in the original question as it's needed to navigate to another view.
JaseTheAce
14

View Modifiers made it easy:

//ViewModifiers.swift

struct HiddenNavigationBar: ViewModifier {
    func body(content: Content) -> some View {
        content
        .navigationBarTitle("", displayMode: .inline)
        .navigationBarHidden(true)
    }
}

extension View {
    func hiddenNavigationBarStyle() -> some View {
        modifier( HiddenNavigationBar() )
    }
}

Example: enter image description here

import SwiftUI

struct MyView: View {
    var body: some View {
        NavigationView {
            VStack {
                Spacer()
                HStack {  
                    Spacer()
                    Text("Hello World!")
                    Spacer()
                }
                Spacer()
            }
            .padding()
            .background(Color.green)
            //remove the default Navigation Bar space:
            .hiddenNavigationBarStyle()
        }
    }
}
Peter Kreinz
quelle
4
Doesn't fix the issue for a pushed view controller.
damjandd
It seems key here that the modifier is not added to the NavigationView but the view just inside. This made all the difference getting it to work. Thanks! :-)
JaseTheAce
9

I also tried all the solutions mentioned on this page and only found @graycampbell solution the one to be working well, with well-working animations. So I tried to create a value I can just use throughout the app that I can access anywhere by the example of hackingwithswift.com

I created an ObservableObject class

class NavBarPreferences: ObservableObject {
    @Published var navBarIsHidden = true
}

And pass it on to the initial view in the SceneDelegate like so

var navBarPreferences = NavBarPreferences()
window.rootViewController = UIHostingController(rootView: ContentView().environmentObject(navBarPreferences))

Then in the ContentView we can keep track of this Observable object like so and create a link to SomeView:

struct ContentView: View {
    //This variable listens to the ObservableObject class
    @EnvironmentObject var navBarPrefs: NavBarPreferences

    var body: some View {
        NavigationView {
                NavigationLink (
                destination: SomeView()) {
                    VStack{
                        Text("Hello first screen")
                            .multilineTextAlignment(.center)
                            .accentColor(.black)
                    }
                }
                .navigationBarTitle(Text(""),displayMode: .inline)
                .navigationBarHidden(navBarPrefs.navBarIsHidden)
                .onAppear{
                    self.navBarPrefs.navBarIsHidden = true
            }
        }
    }
}

And then when accessing the second view (SomeView), we hide it again like this:

struct SomeView: View {
    @EnvironmentObject var navBarPrefs: NavBarPreferences

    var body: some View {
        Text("Hello second screen")
        .onAppear {
            self.navBarPrefs.navBarIsHidden = false
        }
    } 
}

To keep previews working add the NavBarPreferences to the preview like so:

struct SomeView_Previews: PreviewProvider {
    static var previews: some View {
        SomeView().environmentObject(NavBarPreferences())
    }
}
Femkeo
quelle
2
using @EnvironmentObject is much better to pass data throughout the app rather than @State, so I prefer you answer more
Arafin Russell
6

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())
    }
}
Vatsal Manot
quelle
2
With this, the "swift to back" gesture is no longer working
Urkman
6

If you set the title as inline for the View you want remove the space on, this doesn't need to be done on a view with a NavigationView, but the one navigated too.

.navigationBarTitle("", displayMode: .inline)

Starting issue solution 1 then simply change the Navigation bars appearance

init() {
    UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)
    UINavigationBar.appearance().shadowImage = UIImage()
}

on the view that holds the initial NavigationView. final solution

If you want to change the Appearance from screen to screen change the appearance in the appropriate views

MindBlower3
quelle
This solution is useful
Murilo Medeiros
5

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()
Hopreeeenjust
quelle
4

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

Genki
quelle
5
Irrelevant to the asked question
Ahmed Sahib
3
@AhmedSahib The question was "How to remove the default Navigation Bar space in SwiftUI NavigiationView" and my code accomplishes that.
Genki
1
Excellent advice. For my solution I had to apply two modifiers to the inner list to get rid of the spacing: .navigationBarTitle("", displayMode: .automatic) .navigationBarHidden(true) Then on the outer NavigationView I had to apply: .navigationBarTitle("TITLE", displayMode: .inline)
Frankenstein
2

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.

Fabian Streitel
quelle
2

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.

RyanTCB
quelle
0

Really loved the idea given by @Vatsal Manot To create a modifier for this.
Removing isHidden property from his answer, as I don't find it useful as modifier name itself suggests that hide navigation bar.

// Hide navigation bar.
public struct NavigationBarHider: ViewModifier {

    public func body(content: Content) -> some View {
        content
            .navigationBarTitle("")
            .navigationBarHidden(true)
    }
}

extension View {
    public func hideNavigationBar() -> some View {
        modifier(NavigationBarHider())
    }
}
Kiran Jasvanee
quelle
0

I have had a similar problem when working on an app where a TabView should be displayed once the user is logged in.

As @graycampbell suggested in his comment, a TabView should not be embedded in a NavigationView, or else the "blank space" will appear, even when using .navigationBarHidden(true)

I used a ZStack to hide the NavigationView. Note that for this simple example, I use @State and @Binding to manage the UI visibility, but you may want to use something more complex such as an environment object.

struct ContentView: View {

    @State var isHidden = false

    var body: some View {
        
        ZStack {
            if isHidden {
                DetailView(isHidden: self.$isHidden)
            } else {
                NavigationView {
                    Button("Log in"){
                        self.isHidden.toggle()
                    }
                    .navigationBarTitle("Login Page")
                }
            }
        }
    }
}

When we press the Log In button, the initial page disappears, and the DetailView is loaded. The Login Page reappears when we toggle the Log Out button

struct DetailView: View {
    
    @Binding var isHidden: Bool
    
    var body: some View {
        TabView{
            NavigationView {
                Button("Log out"){
                    self.isHidden.toggle()
                }
                .navigationBarTitle("Home")
            }
            .tabItem {
                Image(systemName: "star")
                Text("One")
            }
        }
    }
}
Sala
quelle
0

My solution for this problem was the same as suggested by @Genki and @Frankenstein.

I applied two modifiers to the inner list (NOT the NavigationView) to get rid of the spacing:

.navigationBarTitle("", displayMode: .automatic)
.navigationBarHidden(true) 

On the outer NavigationView, then applied .navigationBarTitle("TITLE") to set the title.

LochNessMonster
quelle
1
It doesn't do anything.
TruMan1
0

SwiftUI 2

There is a dedicated modifier to make the navigation bar take less space:

.navigationBarTitleDisplayMode(.inline)

There's no longer need to hide the navigation bar or set its title.

pawello2222
quelle
-7

Try putting the NavigationView inside a GeometryReader.

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

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

Steven Marcotte
quelle