问题描述
我正在尝试消除顶部堆栈覆盖的空间,但尽管我需要图像来覆盖显示时间且电池未成功的空间,但有人知道该怎么做吗? ?
我留下了一张我想消除的照片,用黄色圈起来,我也留下了我的代码。
import SwiftUI
struct LoginView: View {
@Observedobject var LoginViewM:Loginviewmodel
var body: some View {
GeometryReader{ geo in
NavigationView{
vstack(spacing:10){
topImage
.frame(width: geo.size.width,height: 270)
.padding(.bottom)
vstack{
usernameTextField
errorUsernameLabel
passwordTextField
errorPasswordLabel
}
.aspectRatio(contentMode: .fill)
Spacer(minLength: 10)
vstack{
buttonLogin
}
Spacer(minLength: 10)
vstack{
textInBottom
}
Spacer(minLength: 10)
}
.padding(.all)
.background(Color.black)
}
.padding(.all)
.background(Color.black)
.frame(width: geo.size.width,height: geo.size.height,alignment: .bottom)
}
.padding(.vertical)
.background(Color.black,alignment: .bottom)
.ignoresSafeArea(.all)
}
}
extension LoginView{
var topImage:some View{
Image("header2")
.resizable()
.overlay( ImageOverlay(),alignment: .center)
.background(Color.black)
}
var usernameTextField:some View{
HStack{
TextField("Phone number,username or email",text: $LoginViewM.username)
.font(.custom("Montserrat-Regular",fixedSize: 16.4))
.foregroundColor(.white)
.placeholder(Text("Phone number,username or email").padding().foregroundColor(.white),show: LoginViewM.password.isEmpty)
.background(Color.black)
// need to hide this icon
Image("menuCloseSmall")
.padding(.init(top: 0,leading: 0,bottom: 0,trailing: 14))
}
.overlay(RoundedRectangle(cornerRadius: 4).stroke(Color.gray,linewidth: 3))
.clipShape(RoundedRectangle(cornerRadius: 4))
.padding()
}
var errorUsernameLabel:some View{
Text(" hey you,no user found. Make sure you’ve provided the \n correct information.")
.foregroundColor(.redBlueParrot)
.font(.custom("Montserrat-Regular",size: 12.1))
}
var passwordTextField:some View{
HStack{
TextField("Password",text: $LoginViewM.password)
.font(.custom("Montserrat-Regular",fixedSize: 16.4))
.padding(.bottom)
.foregroundColor(.white)
.placeholder(Text("Password").padding().foregroundColor(.white),show: LoginViewM.username.isEmpty)
.background(Color.black)
Image("editShow")
.padding()
}
.overlay(RoundedRectangle(cornerRadius: 4).stroke(Color.gray,linewidth: 3))
.clipShape(RoundedRectangle(cornerRadius: 4))
.padding()
}
var errorPasswordLabel:some View{
Text(" Incorrect password for \(LoginViewM.password). Please try again.")
.foregroundColor(.redBlueParrot)
.font(.custom("Montserrat-Regular",size: 12.1))
}
var buttonLogin:some View{
Button(action: {
}) {
Text("Log In")
}
.font(.custom("Montserrat-Medium",size: 16))
.foregroundColor(Color.ligthGray)
.frame(width: 174,height: 42,alignment: .center)
.overlay(RoundedRectangle(cornerRadius: 18)
.stroke(Color.gray,linewidth: 1.5))
}
var textInBottom:some View{
HStack(spacing:5){
Text("Forgot")
.foregroundColor(.white)
.font(.custom("Montserrat-Regular",size: 16))
Button("password"){
}
.foregroundColor(.yellow)
.font(.custom("Montserrat-Regular",size: 16))
Text("or")
.foregroundColor(.white)
.font(.custom("Montserrat-Regular",size: 16))
Button("username"){
}
.foregroundColor(.yellow)
.font(.custom("Montserrat-Regular",size: 16))
}
.padding()
}
}
struct LoginView_Previews: PreviewProvider {
static var previews: some View {
LoginView(LoginViewM: Loginviewmodel())
}
}
解决方法
那个间隙是导航栏的标题间隙。您可以设置 .navigationTitle("Example")
来查看。如果你想隐藏它,你需要设置 .navigationBarHidden(true)
。
NavigationView {
VStack(spacing: 10) {
// ...
}
.navigationBarHidden(true) // <-- Here
}