让 SwiftUI 导航栏透明

Question

我正在寻找一种使 NavigationBar 透明的方法。我的 NavigationView 位于 ContentView 的根视图中，其中包含一个 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)
}

即使在根视图中添加以下修饰符后，导航视图栏也会显示。

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

}

下面是我试图隐藏导航栏背景的子视图。

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")


}

}

Answer 1

尝试将这些添加到您的 init() 修饰符中：

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

它在 Xcode 11.2.1、iOS 13.2 中对我有用

Answer 2

您可以使用 UINavigationBar 的此扩展在透明和默认外观之间切换。

extension UINavigationBar {
    static func changeAppearance(clear: Bool) {
        let appearance = UINavigationBarAppearance()
        
        if clear {
            appearance.configureWithTransparentBackground()
        } else {
            appearance.configureWithDefaultBackground()
        }
        
        UINavigationBar.appearance().standardAppearance = appearance
        UINavigationBar.appearance().compactAppearance = appearance
        UINavigationBar.appearance().scrollEdgeAppearance = appearance
    }
}

在你看来结构：

struct ContentView: View {
    init() {
        UINavigationBar.changeAppearance(clear: true)
    }
    var body: some View {
        NavigationView {
            ...
        }
    }
}

Answer 3

对于没有阴影的透明背景：

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

如果第一个解决方案不起作用，那么：

init() {
    let appearance = UINavigationBarAppearance()
    appearance.configureWithTransparentBackground()
    appearance.backgroundColor = .clear
    appearance.shadowColor = .clear
    UINavigationBar.appearance().standardAppearance = appearance
 }

Answer 4

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

更新：1.9.2022

NavigationView {
    ZStack {
        Color.red
        Text("View1")

    }
    .navigationBarTitleDisplayMode(.inline)
    .toolbar{
        ToolbarItem(placement: .principal) {
            Text("Title")
                .opacity(0.5)
        }
    }
    .edgesIgnoringSafeArea(.top)
}