Swift UI 不一致的文本填充空格

Question

这是到目前为止我的 Swift 项目的视觉效果。

我希望每个描述都有一致的填充。如您所见，即使我应用了一致的填充常量，也没有实现。我认为问题与每个文本块及其不同的间距有关。即第二个在“毛发”之后有一个 space 但在 space 之前结束，也许以某种方式将 space 添加到 .leading 填充。另请注意，图像的 .leading padding 会相应移动。

因为这些块中的文本最终将来自用户输入（不是我这里的随机文本），所以对文本和 spaces 的任意组合应用一致的填充是至关重要的。

这里出了什么问题？

当前代码：

struct Header: View {
    var name: String
    var connection: String
    var image: String
    
    init(name: String, connection: String, image: String) {
        self.name = name
        self.connection = connection
        self.image = image
    }
    
    var body: some View {
        HStack() {
            Image(self.image)
                .resizable()
                .frame(width: 60, height: 60)
                .clipShape(Circle())
            VStack(alignment: .leading) {
                Text(self.name)
                    .font(.headline)
                    .fontWeight(.semibold)
                    .foregroundColor(Color.black)
                    .frame(alignment: .leading)
                Text(self.connection)
                    .font(.callout)
                    .fontWeight(.medium)
                    .foregroundColor(Color.gray)
                    .frame(alignment: .leading)
            
            }
        }
    }
}


struct Description: View {
    var description: String
    
    init(description: String) {
        self.description = description
    }
    
    var body: some View {
        Text(self.description)
            .multilineTextAlignment(.leading)
    }
}


struct Post: View {
    var data: PostData
    
    init(data: PostData) {
        self.data = data
    }
    
    var body: some View {
        HStack(alignment: .top) {
            Spacer()
                .frame(width: 110)
            VStack(alignment: .leading, spacing: 0.0) {
                Header(name: self.data.name, connection: self.data.connection, image: self.data.image)
                    .padding(.top, 10)
                    .padding(.bottom, 6)
                    .padding(.leading, 6)
                Description(description: self.data.description)
                    .padding(.bottom, 6)
                    .padding(.leading, 7)
                    .padding(.trailing, 5)
                    
            }
            .frame(maxWidth: .infinity)
            .border(Color.black)
        }
    }
}



struct PostView: View {
    var body: some View {
        VStack(spacing: -1.0) {
            Spacer()
            Post(data: one)
            Post(data: two)
            Post(data: three)
        }
    }
}

Answer 1

马特（在评论中）是完全正确的。我只是对嵌套的 VStacks 感到困惑。这更容易修复并且非常有意义。对齐应该在 top 级别：

struct PostView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: -1.0) { // <=== here
            Spacer()
            Post(data: one)
            Post(data: two)
            Post(data: three)
        }
    }
}

问题是您的对齐应用在 Post 级别，但每个 Post 然后根据其自身的宽度居中。错位的宽度post比其他的要小一点

旧答案：

修复它很简单。解释它对我来说仍然是个谜。（固定：见下文）

此 post 的文本要求比其他 space 少一点，这导致它居中。我不清楚的是为什么 alignment: .leading 没有对齐它。

与大多数“推到边缘”问题一样，解决方法是一个 Spacer：

VStack(alignment: .leading, spacing: 0.0) {
    Header(name: self.data.name, connection: self.data.connection, image: self.data.image)
        .padding(.top, 10)
        .padding(.bottom, 6)
        .padding(.leading, 6)
    HStack {
        Description(description: self.data.description)
            .padding(.bottom, 6)
            .padding(.leading, 7)
            .padding(.trailing, 5)
        Spacer() // <== Left-justify
    }

这会将文本按您想要的方式向左推。但是我没有一个很好的答案来说明为什么需要它。

另一种可能更容易推理的方法是用显式间隔符替换填充：

HStack {
    Spacer().frame(width: 7)
    Description(description: self.data.description)
    Spacer(minLength: 5)
}
.padding(.bottom, 6)

Swift UI 不一致的文本填充空格

Swift UI inconsistent text padding with spaces

text

padding

spacing

swift

swiftui