如何在设置Text（）。frame（maxWidth：.infinity）之后保持文本为前导对齐方式

Question

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

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

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")位于黄色区域的中心。如何让它保持领先地位？

Answer 1

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

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