Question 259303 in IOS Swift Question posted in
The official documentation can be found here.

Ios swift – How do I remove the default transparent header in NavigationView?

When I navigate to another view that contains a scrollview via a NavigationLink I get some behaviour I want to remove.

When you scroll, the top of the view becomes filled with a different colour and blurs whatever is behind it.

How do I remove this effect? Here is the code and some photos showing the effect:

struct Home: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: DetailView()) {
                Text("Go to detail view")
            }
        }
    }
}

struct DetailView: View {
    var body: some View {
        
        VStack {
            ScrollView(.vertical, showsIndicators: false) {
                Circle()
                    .fill(.red)
                
                Circle()
                    .fill(.blue)
                
                Circle()
                    .fill(.yellow)
                
                Circle()
                    .fill(.green)
            }
        }
    }
}

Click for image

I was expecting to be able to remove this with some modifiers but cannot seem to find the correct one if this is in fact the solution

Tags:

2

Answers


  1. 0

    Modify DetailView with .toolbarBackground, and set the navigation bar’s background to an opaque color (e.g. .white).

    NavigationView {
    NavigationLink {
        DetailView().toolbarBackground(.white, for: .navigationBar)
    } label: {
        Text("Go to detail view")
    }
}
    Login or Signup to reply.
  2. 0

    From iOS 16, you can hide the navigation bar with this modifier on the Destination:

    DetailView().toolbarBackground(.visible, for: .navigationBar)

    Hidden

    and make it have a custom color like:

    DetailView().toolbarBackground(.red, for: .navigationBar)

    Colored

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search