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

Question

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

\n\n

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

\n\n

import SwiftUI\n\nstruct ContentView: View {\n    var body: some View {\n\n        GeometryReader { geo in\n            HStack(alignment: .top, spacing: 12) {\n                Image("Alan shore").resizable().frame(width: geo.size.width / 6, height: geo.size.width / 6).cornerRadius(4)\n\n                VStack(alignment: .leading, spacing: 10) {\n\n                   // name\n                   Text("Haibo")\n                   // content\n                   Text("Think ThinkThink ThinkThink ThinkThink ThinkThink ThinkThink ThinkThink ThinkThink Think")\n                   // \xe4\xb9\x9d\xe5\xae\xab\xe6\xa0\xbc\n                   VStack(spacing: 6) {\n\n                       HStack(spacing: 6) {\n                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)\n                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)\n                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)\n                       }\n                       HStack(spacing: 6) {\n                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)\n                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)\n                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)\n                       }\n                       HStack(spacing: 6) {\n                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)\n                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)\n                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)\n                       }\n                   }\n\n                   // Time, Action\n                   HStack {\n                       Text("5 hour ago")\n                       Spacer()\n                       Image("moment-action")\n                   }\n\n                   // Comment\n                   VStack(alignment: .leading) {\n                       Text("Haibo: asdasd").frame(maxWidth: .infinity)\n                       Text("Jobs: WDC WDC WDC WDCWWWWW")\n                   } //.padding(.init(top: 6, leading: 6, bottom: 6, trailing: 12))\n                       .background(Color.yellow)\n                   .cornerRadius(3)\n                }\n            } .padding(.init(top: 12, leading: 12, bottom: 12, trailing: 30))\n        }\n    }\n}\n\n\nstruct ContentView_Previews: PreviewProvider {\n    static var previews: some View {\n        ContentView()\n    }\n}\n

\n\n

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

\n\n

\n

Answer 1

这是 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 框架整个宽度的框架。文本框架领先对齐，但其中的文本默认居中对齐。

这里值得一提的是，“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 中的对齐指南

Answer 2

您应该.leading为其框架添加对齐方式，例如

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