使SwiftUI导航栏透明

Question

我正在寻找一种方法使NavigationBar透明。我的NavigationView位于ContentView中的根视图中，其中包含一个TabView。

我正在寻找一种方法使得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)
}

即使在根视图中添加了以下修改器，NavigationView栏仍然显示。

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


}

- Jason Tremain

---

你是想要使整个栏都透明，包括前景吗？（我问这个问题是因为你尝试使用 isHidden 修饰符。） - user7014451

只需要更改背景，我需要保留用户点击“返回”按钮的功能。 - Jason Tremain

哦，这个问题可能有帮助，但我不确定：https://dev59.com/V7Xna4cB1Zd3GeqPPrvg - user7014451

Answer 1

iOS 16+：

.toolbarBackground(.hidden, for: .navigationBar)

在 iOS 16 及以上版本中：

使用上述代码可以隐藏导航栏的工具栏背景。

- 0xWood

---

适用于iOS 17。 - undefined

Answer 2

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

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

在Xcode 11.2.1和iOS 13.2上对我有效。

- Cliff

---

似乎不需要设置 barTintColor，只需设置 backgroundImage 即可解决问题。 - Mohammad Rahchamani

很遗憾这是全局的。我只想在主屏幕上做这件事。 - TruMan1

我会尝试翻译这段内容：如果不添加 shadowImage 属性，透明的导航栏下方会显示一条线。以下是完整代码：UINavigationBar.appearance().barTintColor = .clear UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default) UINavigationBar.appearance().shadowImage = UIImage() - thenextmillionaire

Answer 3

您可以使用此扩展程序来切换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 {
            ...
        }
    }
}

- alionthego

---

如果这对我有用，它将解决我所有的问题。但似乎对导航栏没有任何影响。我做错了什么？ - LateNate

@LateNate 我已经将答案修改为扩展。在你的结构体中尝试一下，看看是否有效。对我来说运行良好。 - alionthego

啊，我明白了。非常感谢。这太棒了！ - LateNate

请注意这种方法。SwiftUI有时会为不可见的屏幕初始化结构体，例如当被NavigationLink指向时。 - Edward Brey

有没有什么解决办法可以在除了初始化之外的其他部分中使用它，比如在滚动过程中进行更改？ - MrinmoyMk

Answer 4

要使背景透明且没有阴影：

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
 }

- Oleksandr B

Answer 5

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

更新：2022年1月9日

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

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

- Victor Kushnerov

---

只有在没有任何垂直可滚动视图的情况下，此解决方案才能正常工作。 - Muhammad Adil

只需将您的文本替换为简单文本列表。 - Muhammad Adil

这只是一个内容后方红色视图 (Color.red)，并不是透明的 NavigationView。 - Demilitarized Zone

@jason-tremain 我添加了另一种解决方案。 - Victor Kushnerov