[英]SwiftUI Navigation Bar and Status Bar - Make them same color
我有一个新的应用程序,理想情况下,它的顶部会有一个深蓝色的导航栏,向上延伸到状态栏的后面。 使这个不透明和正确的蓝色颜色很痛苦,但我终于想出了如何通过将以下内容放在包含 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 后我的导航栏的屏幕截图(注意栏看起来更浅蓝色,因为透明效果开始发挥作用):
当我开始使用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
类用于更改导航栏的外观,可从 iOS 13 获得。
上面的代码将改变所有控制器的导航栏样式。
以下对我有用:
为 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)
我在这个问题上挣扎了大约一个小时,最后我发现如果您使用的是 TabView,则需要将 edgeIgnoringSafeArea 添加到 TabView 而不是选项卡中的视图。
TabView {
ViewA().tabItem.....
}.edgesIgnoringSafeArea(.top)
希望能帮助到你
尝试使用UIViewControllerRepresentative
:
NavigationView {
VStack {
// your stuff
}
.accentColor(.white)
.background(NavConfigurator { nav in
nav.navigationBar.barTintColor = UIColor(named: "primaryBlue")
nav.navigationBar.titleTextAttributes = [.foregroundColor : UIColor.white]
})
}
编辑:忘记代表代码:
import SwiftUI
struct NavConfigurator: UIViewControllerRepresentable {
var configure: (UINavigationController) -> Void = { _ in }
func makeUIViewController(context: UIViewControllerRepresentableContext<NavConfigurator>) -> UIViewController {
UIViewController()
}
func updateUIViewController(_ uiViewController: UIViewController, context: UIViewControllerRepresentableContext<NavConfigurator>) {
if let nc = uiViewController.navigationController {
self.configure(nc)
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.