ios - SwiftUI 导航栏和状态栏 - 使它们颜色相同
问题描述
我有一个新的应用程序,理想情况下,顶部有一个深蓝色的导航栏,向上延伸到状态栏的后面。使这个不透明和正确的蓝色颜色变得很痛苦,但我终于弄清楚了如何通过将以下内容放入包含 NavigationView 的 View 的 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 开始提供。
上面的代码将改变所有控制器的导航栏样式。
推荐阅读
- javascript - 使用节点和动态生成的 HTML 修改 HTML 文件
- database - 如何将 CSV 文件导入 DolphinDB?
- python - 打开和关闭 Firefox 浏览器的两个实例
- javascript - Node.js - 无法使用 $(this) 从 jquery 访问把手元素
- java - 为什么这个while循环与“and”运算符一起使用而不与“or”一起使用?
- keras - DepthwiseConv2D 和 SeparableConv2D 的区别
- c++11 - 无状态 Lambda 和私有成员
- node.js - 执行 http.get 的 Promise 返回“待处理”
- maven - 仅发布来自一个大项目的某些工件
- ios - 导致 MPNowPlayingInfoCenter 丢失状态的广告横幅