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

问题描述

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

It could be a simple case, but I couldn't find a solution.

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

Here is my code, using the GeometryReader to set the relative layout of SwiftUI view size like Image. The issue in on the last VStack, I want to background of Text to go to the right end of VStack. Thus, I set it as Text("Haibo: asdasd").frame(maxWidth: .infinity) but after that I found the text became to horizontal centered and not followed the VStack alignment: .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") 在黄色区域居中.怎么可能让它一直领先?

Well, please see the screenshot for better understanding, the Text("Haibo: asdasd") is centered in the yellow area. How could let it to be keep leading alignment?

推荐答案

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

This is a fairly confusing aspect of SwiftUI. The VStack alignment specifies how its elements align within the VStack frame, while the Text.frame alignment specifies how the text will align within the Text.frame.

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

I've found it helpful to add some borders as I'm debugging:

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 的 Text 有一个跨越 VStack 框架整个宽度的框架.文本框对齐前导，但其中的文本默认居中对齐.

Now you can see that the Text with maxWidth: .infinity has a frame that spans the entire width of the VStack frame. The text frame is aligned leading, but the text within defaults to a center alignment.

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

It's worth mentioning here that the "jobs..." text is also center aligned to its text frame, but it's not obvious because the frame is sized to the text only, then the text frame itself is leading aligned within the VStack frame.

现在试试这个:

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 框架的全宽，但文本现在在文本框架内对齐.

The text frame is still the full-width of the VStack frame, but the text is now aligned leading within the text frame.

这是没有边框的片段:

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

这是一篇我发现对整理对齐工作原理很有帮助的文章:

Here's an article I found helpful for sorting out how alignment works:

SwiftUI 中的对齐指南

这篇关于设置 Text().frame(maxWidth: .infinity) 后如何保持 Text 作为前导对齐方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！