SwiftUI how to align button to fullscreen

Question

I'm trying to align these two login buttons, I use the same design method to them but found their alignment are different.

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)
                })
                
            }

And test it like

enter image description here

Could anyone help me find out the problem and give me some suggestions?

score 0 · Accepted Answer · answered Mar 22 '23 at 10:29

I guess the problem which you wanna solve right now is the size difference between your login button. The issue can be resolved by moving the frame modifier to the bottom of each button's modifier chain.

When you apply the frame modifier before the other modifiers, it sets the size of the button first, and then the other modifiers are applied to the button within that fixed size. This causes discrepancies in the size and position of the buttons.

By placing the frame modifier at the end of the modifier chain, the button's size is set last, after all the other modifiers have been applied. This ensures that the buttons have the same size and alignment, regardless of the order of the other modifiers.

Here's an updated version of your code with the frame modifier moved to the bottom:

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)
}

SwiftUI how to align button to fullscreen

1 Answers1