VStack .leading 对齐方式

Question

我无法摆脱 VStack 中一个元素的“leading”填充。 我将其父VStack的对齐方式设置为“leading”，但它仍然在左侧显示一些间距（对于文本和红色圆角矩形）。它们应该放在截图上蓝色边缘的旁边的左侧。

您有任何关于为什么会出现这种填充的想法吗？

以下是代码：

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

- eugene_prg

Answer 1

您还需要将容器框架（frame of container）进行对齐，例如：

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)

- Asperi