如何对齐文本视图的内部？

Question

我有一个多行文本字段，我希望它喜欢显示为：

我尝试了在互联网上可以找到的

padding

和

frame

的每种组合，我得到了这样的结果：

Text("the cat sat on the mat\nand that is that")
    .multilineTextAlignment(.leading)
    .padding(.horizontal, 12.0)
    .padding(.vertical, 6.0)
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .border(.black)

看起来像这样：

如果文字较长，它会移到左侧，但我无法从一开始就到达那里。

有什么技巧？

Answer 1

添加另一个边框有助于说明正在发生的事情：

Text("the cat sat on the mat\nand that is that")
   .multilineTextAlignment(.leading)
   .padding(.horizontal, 12.0)
   .padding(.vertical, 6.0)
   .border(Color.green)
   .frame(maxWidth: .infinity, maxHeight: .infinity)
   .border(.black)

所以，你可以看到

Text

并没有占据整个

frame

。您可以向框架添加对齐方式，以便

Text

出现在您想要的位置。

Text("the cat sat on the mat\nand that is that")
   .multilineTextAlignment(.leading)
   .padding(.horizontal, 12.0)
   .padding(.vertical, 6.0)
   .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading) // <-- Here
   .border(.black)