设置 Text().frame(maxWidth: .infinity) 后如何保持 Text 作为前导对齐

这可能是一个简单的案例，但我找不到解决方案。

这是我的代码，使用 GeometryReader 设置 SwiftUI 视图大小的相对布局，如 Image。问题出现在最后一个VStack上，我希望文本的背景转到VStack的右端。因此，我将其设置为Text("Haibo: asdasd").frame(maxWidth: .infinity)但之后我发现文本变得水平居中并且不遵循 VStack 对齐方式：.leading。

import SwiftUI

struct ContentView: View {
    var body: some View {

        GeometryReader { geo in
            HStack(alignment: .top, spacing: 12) {
                Image("Alan shore").resizable().frame(width: geo.size.width / 6, height: geo.size.width / 6).cornerRadius(4)

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

                   // name
                   Text("Haibo")
                   // content
                   Text("Think ThinkThink ThinkThink ThinkThink ThinkThink ThinkThink ThinkThink ThinkThink Think")
                   // 九宫格
                   VStack(spacing: 6) {

                       HStack(spacing: 6) {
                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
                       }
                       HStack(spacing: 6) {
                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
                       }
                       HStack(spacing: 6) {
                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
                       }
                   }

                   // Time, Action
                   HStack {
                       Text("5 hour ago")
                       Spacer()
                       Image("moment-action")
                   }

                   // Comment
                   VStack(alignment: .leading) {
                       Text("Haibo: asdasd").frame(maxWidth: .infinity)
                       Text("Jobs: WDC WDC WDC WDCWWWWW")
                   } //.padding(.init(top: 6, leading: 6, bottom: 6, trailing: 12))
                       .background(Color.yellow)
                   .cornerRadius(3)
                }
            } .padding(.init(top: 12, leading: 12, bottom: 12, trailing: 30))
        }
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

好吧，请看截图以便更好地理解，Text("Haibo: asdasd")以黄色区域为中心。怎样才能让它保持领先呢？

这是 SwiftUI 一个相当令人困惑的方面。 VStack 对齐方式指定其元素在 VStack 框架内的对齐方式，而 Text.frame 对齐方式指定文本在 Text.frame 内的对齐方式。

我发现在调试时添加一些边框很有帮助：

VStack(alignment: .leading) {
    Text("Haibo: asdasd")
        .frame(maxWidth: .infinity)
        .border(Color.red , width: 2.0)
    Text("Jobs: WDC WDC WDC WDCWWWWW")
        .border(Color.green , width: 2.0)
}

现在您可以看到 maxWidth: .infinity 的文本有一个跨越 VStack 框架整个宽度的框架。文本框架is居中对齐，但其中的文本默认居中对齐。

这里值得一提的是，“jobs...”文本也与其文本框架居中对齐，但这并不明显，因为框架仅根据文本调整大小，然后文本框架本身在 VStack 框架内前导对齐。

现在试试这个：

VStack(alignment: .leading) {
    Text("Haibo: asdasd")
        .frame(maxWidth: .infinity, alignment: .leading)
        .border(Color.red , width: 2.0)
    Text("Jobs: WDC WDC WDC WDCWWWWW")
        .border(Color.green , width: 2.0)
}

文本框架仍然是 VStack 框架的全宽，但文本现在在文本框架内领先对齐。

这是没有边框的片段：

VStack(alignment: .leading) {
    Text("Haibo: asdasd")
        .frame(maxWidth: .infinity, alignment: .leading)
    Text("Jobs: WDC WDC WDC WDCWWWWW")
}

我发现这是一篇有助于理清对齐工作原理的文章：

SwiftUI 中的对齐指南 https://swiftui-lab.com/alignment-guides/