SwiftUI - 导航栏颜色更改未应用于状态栏
SwiftUI - Navigation bar colour change not being applied to status bar
我有以下内容:
var body: some View {
NavigationView {
VStack {
Text("Hello")
}.navigationBarTitle("Edit Profile", displayMode: .inline)
.background(NavigationConfiguration { nc in
nc.navigationBar.barTintColor = .red
nc.navigationBar.titleTextAttributes = [.foregroundColor: UIColor.black]
})
}.navigationViewStyle(StackNavigationViewStyle())
}
对于导航栏的配置我有:
struct NavigationConfiguration: UIViewControllerRepresentable {
var configuration: (UINavigationController) -> Void = { _ in }
func makeUIViewController(context: UIViewControllerRepresentableContext<NavigationConfiguration>) -> UIViewController {
UIViewController()
}
func updateUIViewController(_ uiViewController: UIViewController, context: UIViewControllerRepresentableContext<NavigationConfiguration>) {
if let nc = uiViewController.navigationController {
self.configuration(nc)
}
}
}
但由于某种原因,顶部状态栏被遗漏了,并且没有应用颜色:
如何将红色也应用到导航栏上方的状态栏,我希望它是相同的颜色。
我试过以下方法,但失败了:
init() {
UINavigationBar.appearance().backgroundColor = .red
}
尝试以下操作(它应该可以工作,至少在 Xcode 11.4 / iOS 13.4 上测试过,但有人报告说它不是,所以它可能是依赖的)
init() {
let navBarAppearance = UINavigationBarAppearance()
navBarAppearance.configureWithOpaqueBackground()
navBarAppearance.backgroundColor = UIColor.systemRed
UINavigationBar.appearance().standardAppearance = navBarAppearance
}
尝试使用此修改器,因为这可以让您根据每个视图自由更改颜色。
struct NavigationBarModifier: ViewModifier {
var backgroundColor: UIColor = .clear
init(backgroundColor: UIColor, tintColor: UIColor = .white) {
self.backgroundColor = backgroundColor
let coloredAppearance = UINavigationBarAppearance()
coloredAppearance.backgroundColor = backgroundColor
coloredAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
coloredAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
UINavigationBar.appearance().standardAppearance = coloredAppearance
UINavigationBar.appearance().compactAppearance = coloredAppearance
UINavigationBar.appearance().scrollEdgeAppearance = coloredAppearance
UINavigationBar.appearance().tintColor = tintColor
}
func body(content: Content) -> some View {
ZStack{
content
VStack {
GeometryReader { geometry in
Color(self.backgroundColor)
.frame(height: geometry.safeAreaInsets.top)
.edgesIgnoringSafeArea(.top)
Spacer()
}
}
}
}}
我在下面的视图中使用了它:
struct DummyNavigationView: View {
var body: some View {
NavigationView {
VStack {
NavigationLink(destination: Text("Page 2")) {
Text("Go to detail")
}
}
.navigationBarTitle("Edit Profile", displayMode: .inline)
}
.modifier(NavigationBarModifier(backgroundColor: .red, tintColor: .black))
}}
我有以下内容:
var body: some View {
NavigationView {
VStack {
Text("Hello")
}.navigationBarTitle("Edit Profile", displayMode: .inline)
.background(NavigationConfiguration { nc in
nc.navigationBar.barTintColor = .red
nc.navigationBar.titleTextAttributes = [.foregroundColor: UIColor.black]
})
}.navigationViewStyle(StackNavigationViewStyle())
}
对于导航栏的配置我有:
struct NavigationConfiguration: UIViewControllerRepresentable {
var configuration: (UINavigationController) -> Void = { _ in }
func makeUIViewController(context: UIViewControllerRepresentableContext<NavigationConfiguration>) -> UIViewController {
UIViewController()
}
func updateUIViewController(_ uiViewController: UIViewController, context: UIViewControllerRepresentableContext<NavigationConfiguration>) {
if let nc = uiViewController.navigationController {
self.configuration(nc)
}
}
}
但由于某种原因,顶部状态栏被遗漏了,并且没有应用颜色:
如何将红色也应用到导航栏上方的状态栏,我希望它是相同的颜色。
我试过以下方法,但失败了:
init() {
UINavigationBar.appearance().backgroundColor = .red
}
尝试以下操作(它应该可以工作,至少在 Xcode 11.4 / iOS 13.4 上测试过,但有人报告说它不是,所以它可能是依赖的)
init() {
let navBarAppearance = UINavigationBarAppearance()
navBarAppearance.configureWithOpaqueBackground()
navBarAppearance.backgroundColor = UIColor.systemRed
UINavigationBar.appearance().standardAppearance = navBarAppearance
}
尝试使用此修改器,因为这可以让您根据每个视图自由更改颜色。
struct NavigationBarModifier: ViewModifier {
var backgroundColor: UIColor = .clear
init(backgroundColor: UIColor, tintColor: UIColor = .white) {
self.backgroundColor = backgroundColor
let coloredAppearance = UINavigationBarAppearance()
coloredAppearance.backgroundColor = backgroundColor
coloredAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
coloredAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
UINavigationBar.appearance().standardAppearance = coloredAppearance
UINavigationBar.appearance().compactAppearance = coloredAppearance
UINavigationBar.appearance().scrollEdgeAppearance = coloredAppearance
UINavigationBar.appearance().tintColor = tintColor
}
func body(content: Content) -> some View {
ZStack{
content
VStack {
GeometryReader { geometry in
Color(self.backgroundColor)
.frame(height: geometry.safeAreaInsets.top)
.edgesIgnoringSafeArea(.top)
Spacer()
}
}
}
}}
我在下面的视图中使用了它:
struct DummyNavigationView: View {
var body: some View {
NavigationView {
VStack {
NavigationLink(destination: Text("Page 2")) {
Text("Go to detail")
}
}
.navigationBarTitle("Edit Profile", displayMode: .inline)
}
.modifier(NavigationBarModifier(backgroundColor: .red, tintColor: .black))
}}