VStack .leading alignment

Question

I can't get rid of this "leading" padding inside one of my VStacks.

I set alignment to "leading" for its parent VStack but it still shows some spacing on the left (for the text and red rounded rectangle). They were supposed to be placed on the left next to the blue edge on screenshot.

Any ideas on why this padding appears there?

Here's the code:

import SwiftUI

struct RegisterView: View {
    var body: some View {
        VStack(spacing: 0) {

            HStack(alignment: .top) {
                Text("Register")
                    .font(.custom("NotoSans-Regular", size: 24))
                    .fontWeight(.bold)
                    .foregroundColor(Color.tertiaryTitleColor)
            }
            .frame(width: 299, height: 39)
            .padding(.top, 78)
            
            HStack(spacing: 13) {
                BroviderButton(imageName: "googleLogo")
                BroviderButton(imageName: "facebookLogo")
            }
            .padding(.top, 47)

            VStack(alignment: .leading, spacing: 0) {

                Text("Register with E-mail")
                    .font(.custom("NotoSans-Regular", size: 16))
                RoundedRectangle(cornerRadius: 25)
                    .fill(Color.red)
                    .frame(width: 40, height: 20)
            }
            .frame(width: 279)
            .padding(.top, 61)

            Spacer()
        }
        .frame(maxHeight: /*@START_MENU_TOKEN@*/.infinity/*@END_MENU_TOKEN@*/)
        .frame(maxWidth: /*@START_MENU_TOKEN@*/.infinity/*@END_MENU_TOKEN@*/)
        .background(Color.loginBackgroundColor)
        .ignoresSafeArea()
    }
}

struct RegisterView_Previews: PreviewProvider {
    static var previews: some View {
        RegisterView()
    }
}


struct BroviderButton: View {
    var imageName: String
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 27.5)
                .frame(width: 133, height: 56, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                .shadow(color: Color.dropShadowColor, radius: 1, x: 10, y: 20)
                .offset(y: 15)
                .opacity(0.2)
                .blur(radius: 20)
                .opacity(0.2)
            VStack {
                VStack {
                    Image(imageName)
                        .resizable()
                        .scaledToFit()
                }
                .frame(height: 28, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
            }
            .frame(width: 133, height: 56, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
            .foregroundColor(/*@START_MENU_TOKEN@*/.blue/*@END_MENU_TOKEN@*/)
            .background(Color.loginBackgroundColor)
            .cornerRadius(27.5)
            .opacity(1)
                        
        }
    }
}

Asperi Asperi · Accepted Answer · 2020-12-25T17:20:16

You need also apply alignment to frame of container, like

VStack(alignment: .leading, spacing: 0) {

    Text("Register with E-mail")
        .font(.custom("NotoSans-Regular", size: 16))
    RoundedRectangle(cornerRadius: 25)
        .fill(Color.red)
        .frame(width: 40, height: 20)
}
.frame(width: 279)      // << do you really need this? why?
.frame(maxWidth: .infinity, alignment: .leading)    // << here !!
.padding(.top, 61)

VStack .leading alignment

1 Answers