问题描述
我想这样在手表应用中制作用户界面
但是信息按钮的文本对齐方式不合适。见下图: 尝试同时使用文本“ 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())
}