CODEWITHSUNDEEP
swiftuivstack
eugene_prg
eugene_prg

Reputation: 1168

VStack .leading alignment

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

Upvotes: 8

Views: 12814

Answers (1)

Asperi
Asperi

Reputation: 258541

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)

Upvotes: 32

Related Questions