[英]Screen Background Color With ScrollView And Navigation Bar SwiftUI
[英]SwiftUI - Set statusbar background color to align with navigation bar
我正在尝试设置状态栏的背景颜色以使其与导航栏颜色对齐。 在 UIKit 中,我会在它下面放置一个视图。 在 SwiftUI 中,我尝试使用ZStack
但随后大标题不再起作用。
所以这是我目前没有绿色状态栏的工作状态:
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()
}
}
}
它看起来像:
此代码与修饰符.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())
}
}
但是使用默认模式.navigationBarTitle("Connect to Lol", displayMode: .automatic)
.navigationBarTitle("Connect to Lol", displayMode: .large)
.navigationBarTitle("Connect to Lol", displayMode: .automatic)
或.navigationBarTitle("Connect to Lol", displayMode: .large)
- 此方法由于某种原因不起作用并且不会填充状态栏. 如果有人能解释原因,我将不胜感激。
删除状态栏( .statusBar (hidden: true)
)也没有带来结果。
我一直在寻找这个问题,并找到了一篇关于它的好文章。 我通过这篇文章修改了您的代码并取得了成功。
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())
}
}
你必须添加
.edgesIgnoringSafeArea(.all)
背景颜色下的修饰符。
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")
}
}
}
}
}
希望能帮助到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.