Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SwiftUI - NavigationBar in View from NavigationLink quickly showing then disappearing

I have a ContentView containing a NavigationView that leads to a DestinationView. I want to hide the navigation bar in the ContentView, but show it in the DestinationView. To hide it in the ContentView I set navigationBarHidden to true and give navigationBarTitle an empty string. In the DestinationView I set navigationBarHidden to false and give it the title "DestinationView".

If I run the project and tap on the NavigationLink, the DestinationView shows the NavigationBar but quickly hides it after the view appeared. Can anybody help me with this?

struct ContentView: View {
    var body: some View {
        NavigationView {
            ZStack {
                Color.red.frame(maxWidth: .infinity, maxHeight: .infinity)
                NavigationLink(destination: DestinationView()) {
                    ZStack {
                        Color.green.frame(width: 200, height: 200)
                        Text("Tap me")
                    }
                }
            }
            .navigationBarTitle("")
            .navigationBarHidden(true)
        }
    }
}

struct DestinationView: View {
    var body: some View {
        List {
            Text("1")
            Text("2")
        }
        .navigationBarTitle("DestinationView")
        .navigationBarHidden(false)
    }
}

enter image description here

like image 655
Niels Hoogendoorn Avatar asked Mar 04 '20 11:03

Niels Hoogendoorn


People also ask

How do I pop to a specific view in SwiftUI?

ContentView -> View1 -> View2 And from View2 you want to pop to the Root view.

How do I manage navigation in SwiftUI?

Before NavigationStack and NavigationSplitView , SwiftUI introduced the NavigationView and NavigationLink structs. These two pieces work together to allow navigation between views in your application. The NavigationView is used to wrap the content of your views, setting them up for subsequent navigation.

What is Isdetaillink SwiftUI?

Sets the navigation link to present its destination as the detail component of the containing navigation view.


2 Answers

You need to use variable to achieve this and bind it with your destination

struct ContentView: View {
         @State var isNavigationBarHidden: Bool = true
        var body: some View {
            NavigationView {

                ZStack {
                    Color.red.frame(maxWidth: .infinity, maxHeight: .infinity)
                    NavigationLink(destination: DestinationView(isNavigationBarHidden: self.$isNavigationBarHidden)) {
                        ZStack {
                            Color.green.frame(width: 200, height: 200)
                            Text("Tap me")
                        }
                    }

                }
                .navigationBarHidden(self.isNavigationBarHidden)
                .navigationBarTitle("")
                .onAppear {
                    self.isNavigationBarHidden = true
                }
            }
        }
    }

    struct DestinationView: View {
        @Binding var isNavigationBarHidden: Bool
        var body: some View {
            List {
                Text("1")
                Text("2")
            }
            .navigationBarTitle("DestinationView")

            .onAppear {
                self.isNavigationBarHidden = false
            }
        }
    }
like image 58
Jawad Ali Avatar answered Sep 27 '22 22:09

Jawad Ali


There is an issue with the safe area layout guide

struct ContentView: View {
    var body: some View {
        NavigationView {
            ZStack {
                Color.red.frame(maxWidth: .infinity, maxHeight: .infinity)
                VStack {
                    NavigationLink(destination: DestinationView()) {
                        ZStack {
                            Color.green.frame(width: 200, height: 200)
                            Text("Tap me")
                        }
                    }
                }
            }.edgesIgnoringSafeArea(.all)
            .navigationBarHidden(true)
        }
    }
}

struct DestinationView: View {
    var body: some View {
        VStack {
            List {
                Text("1")
                Text("2")
            }
        }.navigationBarTitle("DestinationView")
        .navigationBarHidden(false)
    }
}

Happy Coding...

like image 21
bhargav K Avatar answered Sep 27 '22 23:09

bhargav K