Make SwiftUI navigation bar transparent

问题

I'm searching for a way to make the NavigationBar transparent. My NavigationView is in the root view in ContentView which contains a TabView.

import SwiftUI

struct ContentView: View {
var body: some View {
    TabView {
       HomeView().tabItem {
            Image(systemName: "house.fill")
            Text("Home")
        }.tag(1)
        NavigationView {
        SearchView()
            }

        .tabItem {
            Image(systemName: "magnifyingglass")
            Text("Search")
        }.tag(2)
}

The NavigationView Bar displays even after adding the following modifier in the root view.

init() { 
UINavigationBar.appearance().backgroundColor = .clear
UINavigationBar.appearance().isHidden = false

}

Below is the child view in which I'm trying to hide the navigationbar background.

import SwiftUI

struct FacilityView: View {


var perks = "Badge_NoPerks"
var image = "Image_Course6"
var courseName = "Course"

var body: some View {
    VStack {
        HStack {
            Image(image)
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: UIScreen.main.bounds.width, height: 260)
        }
        VStack(alignment: .leading) {
            HStack {
                Image(perks)
            }
            HStack {
                Text(courseName)
                Spacer()
            }
        }
        .padding(.horizontal)
        Spacer()
    }.padding(.horizontal)
       .edgesIgnoringSafeArea(.top)
      .navigationBarTitle("Facility Details")


}

}

回答1:

Try adding these to your init() modifiers:

UINavigationBar.appearance().barTintColor = .clear
UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)

It worked for me in Xcode 11.2.1, iOS 13.2

回答2:

First you need a navbar config:

struct NavigationConfigurator: UIViewControllerRepresentable {
    var configure: (UINavigationController) -> Void = { _ in }

    func makeUIViewController(context: UIViewControllerRepresentableContext<NavigationConfigurator>) -> UIViewController {
        UIViewController()
    }

    func updateUIViewController(_ uiViewController: UIViewController, context: UIViewControllerRepresentableContext<NavigationConfigurator>) {
        if let nc = uiViewController.navigationController {
            self.configure(nc)
        }
    }
}

Then, in your view set the following:

.navigationBarHidden(false)
.navigationBarTitle("your title", displayMode: .automatic) // or inline 

.background(NavigationConfigurator { nc in
    nc.navigationBar.barTintColor =  UIColor.clear
    nc.navigationBar.setBackgroundImage(UIImage(), for: .default)
})

回答3:

var body: some View {
    NavigationView {
        ZStack {
            Color.red
            Text("View1")
                .navigationBarHidden(false)
                .navigationBarTitle("Title")
        }
        .edgesIgnoringSafeArea(.top)
    }
}

来源：https://stackoverflow.com/questions/57616430/make-swiftui-navigation-bar-transparent

标签

uinavigationbar

swiftui