SwiftUI如何将按钮对齐到全屏

bjg7j2ky  于 2023-03-28  发布在  Swift
关注(0)|答案(1)|浏览(161)

我试图对齐这两个登录按钮,我使用相同的设计方法,但发现他们的对齐方式不同。

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
谁能帮我找出问题并给予我一些建议?

66bbxpm5

66bbxpm51#

我猜你现在想解决的问题是登录按钮的大小差异。这个问题可以通过将frame修饰符移动到每个按钮的修饰符链的底部来解决。
当你在其他修改器之前应用frame修改器时,它会先设置按钮的大小,然后其他修改器会在固定大小内应用到按钮。这会导致按钮的大小和位置不一致。
通过将frame修饰符放置在修饰符链的末尾,按钮的大小将在所有其他修饰符都被应用之后最后设置。这确保了按钮具有相同的大小和对齐方式,而不管其他修饰符的顺序如何。
下面是代码的更新版本,frame修饰符移到了底部:

VStack(spacing: 15) {
    Button(action: {
        loginWithWechat()
    }) {
        HStack {
            Image("wechat")
                .resizable()
                .frame(width: 22.9, height: 20)
            Text("Login With Wechat")
                .bold()
        }
    }
    .foregroundColor(.white)
    .padding()
    .background(Color.black)
    .cornerRadius(.infinity)
    .overlay(
        RoundedRectangle(cornerRadius: .infinity)
            .stroke(Color.white, lineWidth: 3)
    )
    .frame(width: 300, height: 50)
    
    Button(action: {
        loginWithGoogle()
    }) {
        HStack {
            Image("google")
                .resizable()
                .frame(width: 20, height: 20)
            Text("Login With Google")
                .bold()
        }
    }
    .foregroundColor(.black)
    .padding()
    .background(Color.white)
    .cornerRadius(.infinity)
    .overlay(
        RoundedRectangle(cornerRadius: .infinity)
            .stroke(Color.black, lineWidth: 3)
    )
    .frame(width: 300, height: 50)
}

相关问题