SwiftUI 导航栏和状态栏 - 使它们的颜色相同

Question

我有一个新的应用程序，理想情况下，它的顶部会有一个深蓝色的导航栏，向上延伸到状态栏的后面。使这个不透明和正确的蓝色颜色很痛苦，但我终于想出了如何通过将以下内容放在包含 NavigationView 的视图的 init() 中来使其工作：

init() {
    UINavigationBar.appearance().barTintColor = UIColor(named: "primaryBlue")
    UINavigationBar.appearance().backgroundColor = UIColor(named: "primaryBlue")
    UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)
    UINavigationBar.appearance().isOpaque = true
}

这会产生一个如下所示的导航栏。它是蓝色的，但状态栏仍然是白色带黑色文本（我希望它是带白色文本的深蓝色）。

接下来，我知道我必须使状态栏的文本“轻内容”，并从 Idiqual here找到了一个很好的解决方案，但这只是改变了栏的颜色“主题”，似乎没有一种使用此方法更改背景颜色的方法。实施后，我现在有一个状态栏，可以在深色背景上显示浅色文本，但我无法弄清楚如何让 NavigationView 的深蓝色背景扩展到状态栏的顶部。所以我剩下的是这个：

我尝试了几件事，例如将 .edgesIgnoringSafeArea(.top) 添加到几个不同的地方，包括 NavigationView 的右括号以及我在父视图中的 TabView，但没有任何效果。我错过了一些简单的东西吗？如何将 NavigationBar 的颜色扩展到屏幕顶部？这是我的导航视图的代码。此结构称为“FetchFrontPageArticles”：

var body: some View {
    NavigationView {
        VStack {
            List(self.fetcher.articles) { article in
                ...
            }.navigationBarTitle("", displayMode: .inline)
            .navigationBarItems(
                leading: Text(""),
                trailing: NavProfile()
            )
        }
    }
}

“FetchFrontPageArticles”是从此处显示的父 TabView 加载的：

TabView(selection: $selection){
        FetchFrontPageArticles()
            .tabItem {
                VStack {
                    Image("house")
                    Text("Home")
                }
            }
            .tag(0)
        Text("Second View")
            .tabItem {
                VStack {
                    Image("list.dash")
                    Text("Browse")
                }
            }
            .tag(1)
        ...
    }
    .accentColor(Color("primaryYellow"))

我很难解决这个问题，看起来应该很简单。请帮忙！

更新：根据下面凯尔的回答，我已经尝试过这种方法。这是实现 NavConfigurator 后我的导航栏的屏幕截图（注意栏看起来更淡蓝色，因为透明效果开始发挥作用）：

Answer 1

当我开始使用 编码时SwiftUI，我遇到了同样的问题，经过大量研究，我找到了解决方案。

将下面的代码放在SceneDelegate类中。

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {        
    let newAppearance = UINavigationBarAppearance()
    newAppearance.configureWithOpaqueBackground()
    newAppearance.backgroundColor = .black
    newAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]

    UINavigationBar.appearance().standardAppearance = newAppearance

    //Other code for displaying the first screen
}

UINavigationBarAppearance class 用于更改导航栏的外观，可从 iOS 13 获得。

上面的代码将改变所有控制器的导航栏样式。

Answer 2

以下对我有用：

为 UINavigationController 创建一个扩展，它将改变以下内容：

• 导航栏背景颜色
• 状态栏背景颜色

• 导航栏标题颜色

  import UIKit
  
  extension UINavigationController {
      override open func viewDidLoad() {
          super.viewDidLoad()
  
          let appearance = UINavigationBarAppearance()
          //background color of the navigation and status bar
          appearance.backgroundColor = .black
          //color when the title is large
          appearance.largeTitleTextAttributes.updateValue(UIColor.white, forKey: NSAttributedString.Key.foregroundColor)
          //color when the title is small
          appearance.titleTextAttributes.updateValue(UIColor.white, forKey: NSAttributedString.Key.foregroundColor)
  
          // change the background- and title foregroundcolor for navigationbar
          navigationBar.standardAppearance = appearance
          navigationBar.scrollEdgeAppearance = appearance
          navigationBar.compactAppearance = appearance
          // change color of navigationbar items
          navigationBar.tintColor = UIColor.white
      }
  }
  

但是这不会改变状态栏的前景色。为此，我们需要执行以下操作：

导入 SwiftUI

class HostingController<Content> : UIHostingController<Content> where Content : View {
    @objc override dynamic open var preferredStatusBarStyle: UIStatusBarStyle {
        return .lightContent
    }
}

然后在我们的场景委托中

我们需要更换

window.rootViewController = UIHostingController(rootView: contentView)

和

window.rootViewController = HostingController(rootView: contentView)