ios 如何在SwiftUI中设置清晰/透明背景的导航栏?

lg40wkob  于 2023-06-25  发布在  iOS
关注(0)|答案(2)|浏览(222)

我试图弄清楚如何写一个自定义导航栏的代码,以显示清晰/透明的栏,而不是“白色”栏。请看以下截图:

下面是我的代码:

import SwiftUI

struct ContentView: View {

init() {

    UINavigationBar.appearance().tintColor = .clear
    UINavigationBar.appearance().backgroundColor = .clear
}

var body: some View {

    NavigationView {
         ZStack {
              Color(.lightGray).edgesIgnoringSafeArea(.all)
                VStack() {
                    Spacer()
                    Text("Hello").foregroundColor(.white)
                    Spacer()
                }
            }
            .navigationBarTitle(Text("First View"), displayMode: .inline)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
       ContentView()
    
 }
}

有人知道它出了什么问题吗?

busg9geu

busg9geu1#

我试着在我的Xcode上运行你的代码。我得到了和你一样的结果。我找到了一个很好的解决方案来解决这个问题。您只需要在init()中添加几行代码。解决方案如下:

import SwiftUI

struct ContentView: View {

     init() {

          UINavigationBar.appearance().setBackgroundImage(UIImage(), for: UIBarMetrics.default)
          UINavigationBar.appearance().shadowImage = UIImage()
          UINavigationBar.appearance().isTranslucent = true
          UINavigationBar.appearance().tintColor = .clear
          UINavigationBar.appearance().backgroundColor = .clear
     }

     var body: some View {

          NavigationView {
              ZStack {
                  Color(.lightGray).edgesIgnoringSafeArea(.all)
                  VStack() {
                      Spacer()
                      Text("Hello").foregroundColor(.white)
                      Spacer()
                  }
             }
              .navigationBarTitle(Text("First View"), displayMode: .inline)
          }
       }
    }

   struct ContentView_Previews: PreviewProvider {
          static var previews: some View {
             ContentView()

          }
    }

我希望这对你有帮助。

ecfdbz9o

ecfdbz9o2#

从iOS 16开始,您可以只使用.toolbarBackground(.hidden, for: .navigationBar)来获取以太网NavigationViewNavigationStack的内容,以实现清晰的背景。
但是对于您的特定情况,默认情况下NavBar背景应该已经是透明的-只需删除init()
如果需要为导航栏添加特定背景,请考虑使用将ShapeStyle和可见性应用于该背景的修改器组合,即:

NavigationView {
        Text("Hello, World!")
            .toolbarBackground(.red, for: .navigationBar)
            .toolbarBackground(.visible, for: .navigationBar)
            .navigationBarTitleDisplayMode(.inline)
            .navigationTitle(Text("Title"))
    }

相关问题