VStack .leading 对齐答案

【问题标题】：VStack .leading alignmentVStack .leading 对齐
【发布时间】：2021-04-03 14:31:56
【问题描述】：

我无法摆脱我的一个 VStack 中的这种“领先”填充。

我将其父 VStack 的对齐方式设置为“领先”，但它仍然在左侧显示一些间距（对于文本和红色圆角矩形）。它们应该放在屏幕截图蓝色边缘的左侧。

关于为什么这个填充出现在那里的任何想法？

代码如下：

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

【问题讨论】：

标签： swiftui vstack

【解决方案1】：

您还需要对容器的框架应用对齐方式，例如

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)

【讨论】：