[英]SwiftUI - Set statusbar background color to align with navigation bar
I am trying to set the background color of the status bar to align it with the navigation bar color.我正在尝试设置状态栏的背景颜色以使其与导航栏颜色对齐。 In UIKit I would place a view underneath it.
在 UIKit 中,我会在它下面放置一个视图。 In SwiftUI I tried to use a
ZStack
but then the large title would not work anymore.在 SwiftUI 中,我尝试使用
ZStack
但随后大标题不再起作用。
So this is my current working status without a green status bar:所以这是我目前没有绿色状态栏的工作状态:
var body: some View {
NavigationView {
ScrollView {
Text("Lol 123 Lol")
.foregroundColor(Color.secondary)
.padding([.top, .bottom], 16)
.padding([.leading,.trailing], 16)
TwoTextFieldsView(isSecondSecure: true,
firstTextFieldText: username,
secondTextFieldText: password,
firstTextFieldPlaceholder: "Username",
secondTextFieldPlaceholder: "Password")
.padding([.leading,.trailing, .bottom], 16)
}
.navigationBarTitle("Connect to Lol")
.onTapGesture {
self.hideKeyboard()
}
}
}
And it looks like:它看起来像:
This code works with the modifier .navigationBarTitle("Connect to Lol", displayMode: .inline)
:此代码与修饰符
.navigationBarTitle("Connect to Lol", displayMode: .inline)
:
struct ContentView1: View {
@State private var password = ""
init() {
UINavigationBar.appearance().barTintColor = .brown
}
var body: some View {
NavigationView {
ScrollView {
Text("Lol 123 Lol")
.foregroundColor(Color.secondary)
.padding([.top, .bottom], 16)
.padding([.leading,.trailing], 16)
TextField("Test", text: $password)
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding([.leading,.trailing, .bottom], 16)
}
.navigationBarTitle("Connect to Lol", displayMode: .inline)
}
// do not forget to add this
.navigationViewStyle(StackNavigationViewStyle())
}
}
But with default mode .navigationBarTitle("Connect to Lol", displayMode: .automatic)
or .navigationBarTitle("Connect to Lol", displayMode: .large)
- this method does not work for some reason and does not fill in the status bar.但是使用默认模式
.navigationBarTitle("Connect to Lol", displayMode: .automatic)
.navigationBarTitle("Connect to Lol", displayMode: .large)
.navigationBarTitle("Connect to Lol", displayMode: .automatic)
或.navigationBarTitle("Connect to Lol", displayMode: .large)
- 此方法由于某种原因不起作用并且不会填充状态栏. If someone can explain why, I would be grateful.如果有人能解释原因,我将不胜感激。
Deleting status bar ( .statusBar (hidden: true)
) also did not bring results.删除状态栏(
.statusBar (hidden: true)
)也没有带来结果。
I was looking for this problem and found a great article about it .我一直在寻找这个问题,并找到了一篇关于它的好文章。 And i modified your code by this article and came to success.
我通过这篇文章修改了您的代码并取得了成功。
struct ContentView1: View {
@State private var password = ""
init() {
let coloredAppearance = UINavigationBarAppearance()
coloredAppearance.backgroundColor = .green
coloredAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.black]
UINavigationBar.appearance().standardAppearance = coloredAppearance
UINavigationBar.appearance().scrollEdgeAppearance = coloredAppearance
}
var body: some View {
NavigationView {
ScrollView {
Text("Lol 123 Lol")
.foregroundColor(Color.secondary)
.padding([.top, .bottom], 16)
.padding([.leading,.trailing], 16)
TextField("Test", text: $password)
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding([.leading,.trailing, .bottom], 16)
}
.navigationBarTitle("Connect to Lol")
}
// do not forget to add this
.navigationViewStyle(StackNavigationViewStyle())
}
}
You have to add你必须添加
.edgesIgnoringSafeArea(.all)
.edgesIgnoringSafeArea(.all)
modifier under your background color.背景颜色下的修饰符。
struct ContentView: View {
@State private var password = ""
var body: some View {
NavigationView {
ZStack {
Color.green
.edgesIgnoringSafeArea(.all) //<-- Add this modifier to the background Color
VStack {
ScrollView {
Text("Lol 123 Lol")
.foregroundColor(Color.secondary)
.padding([.top, .bottom], 16)
.padding([.leading,.trailing], 16)
TextField("Test", text: $password)
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding([.leading,.trailing, .bottom], 16)
}
.navigationBarTitle("Connect to Lol")
}
}
}
}
}
Hope it helps.希望能帮助到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.