SwiftUI导航栏和状态栏-使它们具有相同的颜色 [英] SwiftUI Navigation Bar and Status Bar - Make them same color

问题描述

我有一个新的应用程序，理想情况下，顶部将有一个深蓝色的实心导航栏，该导航栏在状态栏后面延伸.使这种不透明和正确的蓝色成为一种痛苦，但是我最终通过将以下内容放入包含NavigationView的View的init()中，弄清楚了如何使其工作:

  init(){UINavigationBar.appearance().barTintColor = UIColor(名称:"primaryBlue")UINavigationBar.appearance().backgroundColor = UIColor(名称:"primaryBlue")UINavigationBar.appearance().setBackgroundImage(UIImage()，用于:.default)UINavigationBar.appearance().isOpaque = true} 

这将导致导航栏如下所示.它是蓝色的，但是状态栏仍然是白色，带有黑色文本(我希望它是深蓝色，带有白色文本).

接下来，我知道我必须将状态栏的文本设置为浅色内容"，并从Idiqual找到了一个很好的解决方案

我已经尝试了几件事，例如将.edgesIgnoringSafeArea(.top)添加到几个不同的位置，包括NavigationView的右括号以及父视图中的TabView，但没有任何效果.我是否缺少简单的东西?如何将NavigationBar的颜色扩展到屏幕顶部?这是我的Nav视图的代码.此结构称为"FetchFrontPageArticles":

 变量主体:某些视图{NavigationView {VStack {List(self.fetcher.articles){...} .navigationBarTitle("，displayMode:.inline).navigationBarItems(开头:Text(")，尾随:NavProfile())}}} 

从此处显示的父TabView加载"FetchFrontPageArticles":

  TabView(选择:$ selection){FetchFrontPageArticles().tabItem {VStack {图片(房子")文字(首页")}}.tag(0)文字(第二视图").tabItem {VStack {图片("list.dash")文字(浏览")}}.tag(1)...}.accentColor(Color("primaryYellow")) 

我很想解决这个问题，而且看起来应该很简单.请帮忙！

更新:根据下面凯尔(Kyle)的回答，我已经尝试过这种方法.这是实现NavConfigurator后我的导航栏的屏幕截图(注意，该栏看起来更浅蓝色，因为透明效果起作用了):

解决方案

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

将以下代码放入 SceneDelegate 类中.

  func scene(_ scene:UIScene，willConnectTo会话:UISceneSession，选项connectionOptions:UIScene.ConnectionOptions){让newAppearance = UINavigationBarAppearance()newAppearance.configureWithOpaqueBackground()newAppearance.backgroundColor = .blacknewAppearance.titleTextAttributes = [.foregroundColor:UIColor.white]UINavigationBar.appearance().standardAppearance = newAppearance//用于显示第一个屏幕的其他代码} 

UINavigationBarAppearance 类用于更改导航栏的外观，可在iOS 13中使用.

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

I have a new app that ideally will have a solid dark blue navigation bar at the top that extends up behind the status bar. It was a pain to make this opaque and the correct color of blue, but I finally figured out how to make it work by putting the following in the init() of my View that contains the NavigationView:

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

This results in a navigation bar that looks like this. It's blue, but the status bar is still white with black text (I want it to be dark blue with white text).

Next, I knew that I had to make the text of the status bar "light content", and found a good solution from Idiqual here, but this simply changes the color "theme" of the bar, and there doesn't appear to be a way to change the background color using this method. After implementation, I now have a status bar that is ready to show light text on a dark background, but I'm unable to figure out how to get the dark blue background of the NavigationView to extend to the top of the status bar. So what I'm left with is this:

I've tried several things, such as adding .edgesIgnoringSafeArea(.top) to several different places, including the closing bracket of the NavigationView and also the TabView that I have in the parent view, but nothing works. Am I missing something simple? How do I extend the NavigationBar's color to the top of the screen? Here is the code for my Nav view. This struct is called "FetchFrontPageArticles":

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

"FetchFrontPageArticles" is loaded from the parent TabView shown here:

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

I'm pretty stuck trying to resolve this, and it seems like it should be simple. Please help!

UPDATE: Per Kyle's answer below, I've already tried this approach. Here is a screenshot of my nav bar after implementing the NavConfigurator (notice the bar looks lighter blue, because the transparency effect comes into play):

解决方案

When I started coding with SwiftUI, I faced the same issue and after so much research I found the solution.

Put the below code in the SceneDelegate class.

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 is used for changing appearance of the navigation bar and it is available from iOS 13.

The above code will change the navigation bar style of all the controllers.

这篇关于SwiftUI导航栏和状态栏-使它们具有相同的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！