我想这样在手表应用程序中创建UI
但是信息按钮的文本对齐方式不合适。参见下图:尝试使用文本“ i”和系统映像“ info”,仍然是同一问题
这是我的代码:
VStack {
TextField("User Name", text: $userName)
.textContentType(.username)
.multilineTextAlignment(.center)
SecureField("Password", text: $password)
.textContentType(.password)
.multilineTextAlignment(.center)
Spacer()
Spacer()
HStack {
Button(action: {
//action
}) {
Text("Go")
}.disabled(userName.isEmpty || password.isEmpty)
.frame(width: 80, height: 40, alignment: Alignment.bottom)
Spacer()
VStack {
Spacer()
Button(action: {
//action
}) {
Image(systemName: "info")
}.frame(width: 25, height: 25, alignment: Alignment.bottom)
.foregroundColor(.black)
.background(Color.white)
.clipShape(Circle())
}
}
}
您只需删除那些让默认居中对齐生效的框对齐和分隔符即可:
HStack(alignment: .bottom) { // << here !!
Button(action: {
//action
}) {
Text("Go")
}.disabled(userName.isEmpty || password.isEmpty)
.frame(width: 80, height: 40)
Spacer()
Button(action: {
//action
}) {
Image(systemName: "info")
}.frame(width: 25, height: 25)
.foregroundColor(.black)
.background(Color.white)
.clipShape(Circle())
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句