我试图对齐这两个登录按钮,我使用相同的设计方法,但发现他们的对齐方式不同。
VStack(spacing: 15) {
//https://stackoverflow.com/questions/58048831/add-text-and-image-to-button-in-swiftui button with image and text inset
Button(action: {
loginWithWechat()
}) {
HStack {
//https://stackoverflow.com/questions/56505692/how-to-resize-image-with-swiftui resize image
Image("wechat").resizable().frame(width: 22.9, height: 20)
Text("Login With Wechat").bold()
}
}
.padding()
.foregroundColor(.white)
.background(Color.black)
.cornerRadius(.infinity)
.frame(width: 300, height: 50)
.overlay(content: {
RoundedRectangle(cornerRadius: .infinity).stroke(Color.white, lineWidth: 3)
})
Button(action: {
loginWithGoogle()
}) {
HStack {
Image("google").resizable().frame(width: 20, height: 20)
Text("Login With Google").bold()
}
}
.padding()
.foregroundColor(.black)
.background(Color.white)
.cornerRadius(.infinity)
.frame(width: 300, height: 50)
.overlay(content: {
RoundedRectangle(cornerRadius: .infinity).stroke(Color.black, lineWidth: 3)
})
}
然后测试它就像
enter image description here
谁能帮我找出问题并给予我一些建议?
1条答案
按热度按时间66bbxpm51#
我猜你现在想解决的问题是登录按钮的大小差异。这个问题可以通过将
frame
修饰符移动到每个按钮的修饰符链的底部来解决。当你在其他修改器之前应用
frame
修改器时,它会先设置按钮的大小,然后其他修改器会在固定大小内应用到按钮。这会导致按钮的大小和位置不一致。通过将
frame
修饰符放置在修饰符链的末尾,按钮的大小将在所有其他修饰符都被应用之后最后设置。这确保了按钮具有相同的大小和对齐方式,而不管其他修饰符的顺序如何。下面是代码的更新版本,frame修饰符移到了底部: