Swiftui List Navigation Bar transparent

Question

I'm trying to make the navigation bar transparent, like in the first image

The difference is that the test view is wrapped inside a NavigationView but I can't use that on the second view (contact & faq).

The test view is like a leaf, there's no more navigation from it. But from the contact & FAQ view, there's more navigation to be done.

Settings
| -Contact & FAQ
      | - FAQ
           | - question1
           | - question2

If i wrap the list in NavigationView on both Contact & FAQ and FAQ, i get a double navigation bar

Settings View

NavigationView {
            List {
                    NavigationLink(destination: ContactView()) {
                        
                        HStack{
                            Image(systemName: "questionmark.bubble")
                                .foregroundColor(Color.primaryColor)
                            Text("Contact & FAQ")
                        }
                    }
                }
}

Contact & FAQ View

List {            
            Section {
                NavigationLink(destination: FAQListView()) {
                    HStack {
                        Image(systemName: "questionmark.diamond")
                            .foregroundColor(Color.primaryColor)
                        Text("FAQ")
                            .foregroundColor(Color.primaryBLReversed)
                    }
                }
    }
        .listStyle(.insetGrouped)
        .background(Color.primaryBackground)
        .scrollContentBackground(.hidden)
        .font(Font.custom("Poppins-Regular", size: 18.37))
        .navigationBarBackButtonHidden(true)
        .navigationBarTitleDisplayMode(.inline)
        .navigationBarItems(.....)
        .background(Color.primaryBackground)
        .padding(.top, 10)

FAQ List View

List {
            ForEach(....)
            .padding(.top, 20)
            .background(Color.primaryBackground)
            .scrollContentBackground(.hidden)
     }
        .font(Font.custom("Poppins-Regular", size: 18.37))
        .navigationBarBackButtonHidden(true)
        .navigationBarTitleDisplayMode(.inline)
        .navigationBarItems(....)
        .background(Color.primaryBackground)
        .padding(.top, 10)

Any ideas?

Does this answer your question? [Make SwiftUI navigation bar transparent](https://stackoverflow.com/questions/57616430/make-swiftui-navigation-bar-transparent) — timbre timbre, Jan 23 '23 at 22:51
Also: https://stackoverflow.com/questions/58383318/how-to-set-a-navigation-bar-in-clear-transparent-background-in-swiftui — timbre timbre, Jan 23 '23 at 22:52
No, sorry. I'm talking about a list view, not navigation view. I've tried what they said in the posts but it's not wokring for me — ALex, Jan 23 '23 at 23:10
Then share more code (and not as screenshots). Because as it currently reads, your question (and pictures) are about navigation bar (List contains navigation link, but it's not the one setting a style for navigation bar). List background, btw, also has a bunch of solutions and workarounds, if this is what you are asking about: https://stackoverflow.com/questions/56517904/how-do-i-modify-the-background-color-of-a-list-in-swiftui — timbre timbre, Jan 23 '23 at 23:41

score 0 · Accepted Answer · answered Jan 24 '23 at 11:28

Ok, so after some trial and error this is are the final modifier that i've added to the list

.toolbarBackground(.hidden, for: .navigationBar)
        .navigationBarTitleDisplayMode(.automatic)
        .listStyle(.insetGrouped)
        .font(Font.custom("Poppins-Regular", size: 18.37))
        .navigationBarBackButtonHidden(true)

The culprit was that .padding(.top, 10) which was giving the toolbar a color. Now that i've removed it, it doesn't show a color anymore, except the list goes behind the toolbar, for which i use the .toolbarBackground(.hidden, for: .navigationBar) but this is for ios 16+

Swiftui List Navigation Bar transparent

1 Answers1