ios SwiftUI 文本对齐

SwiftUI text-alignment

提问by inokey

Among the many properties of the Textview, I couldn't find any related to text alignment. I've seen in a demo that it automatically handles RTL, and when placing stuff using View's body, it always centers it automatically.

在Text视图的众多属性中，我找不到与文本对齐相关的任何属性。我在一个演示中看到它自动处理 RTL，当使用 View 放置东西时body，它总是自动居中。

Is there some concept that I'm missing about layout system in SwiftUIand if not, how can I set the text alignment properties to the Text?

我是否缺少有关布局系统的一些概念，SwiftUI如果没有，如何将文本对齐属性设置为Text?

回答by vrwim

You can do this via the modifier .multilineTextAlignment(.center).

你可以通过修饰符来做到这一点.multilineTextAlignment(.center)。

Apple Documentation

苹果文档

回答by Jim Marquardt

From SwiftUI beta 3 forward, you can center a text view with the frame modifier:

从 SwiftUI beta 3 开始，您可以使用框架修饰符将文本视图居中：

Text("Centered")
    .frame(maxWidth: .infinity, alignment: .center)

回答by fredpi

I guess SwiftUIwants us to use wrappers like stacks for such things.

我SwiftUI想我们希望我们使用像堆栈这样的包装器来处理这些事情。

So instead of writing something like Text("Hello World").aligned(.leading), the following is encouraged:

因此，不要写类似的东西Text("Hello World").aligned(.leading)，而是鼓励以下内容：

VStack(alignment: .leading) {
    Text("Hello World")
}

回答by Lekyaira

I've actually run into the problem where I had to align text on a single line. What I've found to work is this:

我实际上遇到了必须在一行上对齐文本的问题。我发现有效的是：

Text("some text")
    .frame(alignment: .leading)

If you combine this with the frame width parameter you can get some nice text block formatting for labels and such.

如果您将其与框架宽度参数结合使用，您可以获得一些不错的标签文本块格式等。

回答by staticVoidMan

Was trying to understand this myself as other answers here mention Text.multilineTextAlignment(_:)/ VStack(alignment:)/ frame(width:alignment:)but each solution solves a specific problem. Eventually it depends on the UI requirement and a combination of these.

试图自己理解这一点，因为这里提到的其他答案Text.multilineTextAlignment(_:)/ VStack(alignment:)/frame(width:alignment:)但每个解决方案都解决了一个特定的问题。最终它取决于 UI 要求和这些的组合。

---

---

VStack(alignment:)

VStack(alignment:)

The alignmenthere is for the inner views in respective to one another.
So specifying .leadingwould associate all inner views to have their leading aligned with one another.

在alignment这里是在各自对彼此的内心看法。
因此，指定.leading会将所有内部视图关联起来，使它们的前导彼此对齐。

VStack(alignment: .leading, spacing: 6) {
  Text("Lorem ipsum dolor")
        .background(Color.gray.opacity(0.2))
  Text("sit amet")
        .background(Color.gray.opacity(0.2))
}
.background(Color.gray.opacity(0.1))

---

---

.frame

.frame

In frame(width:alignment:)or frame(maxWidth:alignment:), the alignmentis for the contents within the given width.

在frame(width:alignment:)or 中frame(maxWidth:alignment:)，alignment是给定宽度内的内容。

VStack(alignment: .leading, spacing: 6) {
  Text("Lorem ipsum dolor")
      .background(Color.gray.opacity(0.2))
  Text("sit amet")
      .background(Color.gray.opacity(0.2))
}
.frame(width: 380, alignment: .trailing)
.background(Color.gray.opacity(0.1))

The inners views are leading aligned respective to one another but the views themselves are trailing aligned respective to the VStack.

内部视图彼此前导对齐，但视图本身相对于VStack.

---

---

.multilineTextAlignment

.multilineTextAlignment

This specifies the alignment of the text inside and can be seen best when there are multiple lines otherwise without a defined frame(width:alignment), the width is automatically adjusted and gets affected by the default alignments.

这指定了内部文本的对齐方式，当有多行时可以最好地看到，否则没有定义frame(width:alignment)，宽度会自动调整并受到默认alignments 的影响。

VStack(alignment: .trailing, spacing: 6) {
  Text("0. automatic frame\n+ view at parent's specified alignment\n+ multilineTA not set by default at leading")
    .background(Color.gray.opacity(0.2))
  Text("1. automatic frame\n+ view at parent's specified alignment\n+ multilineTA set to center")
  .multilineTextAlignment(.center)
  .background(Color.gray.opacity(0.2))
  Text("2. automatic frame\n+ view at parent's specified alignment\n+ multilineTA set to trailing")
  .multilineTextAlignment(.trailing)
  .background(Color.gray.opacity(0.2))
}
.frame(width: 380, alignment: .trailing)
.background(Color.gray.opacity(0.1))

---

---

Tests with combinations:

组合测试：

VStack(alignment: .trailing, spacing: 6) {
  Text("1. automatic frame, at parent's alignment")
  .background(Color.gray.opacity(0.2))
  Text("2. given full width & leading alignment\n+ multilineTA at default leading")
  .frame(maxWidth: .infinity, alignment: .leading)
  .background(Color.gray.opacity(0.2))
  Text("3. given full width & center alignment\n+ multilineTA at default leading")
  .frame(maxWidth: .infinity, alignment: .center)
  .background(Color.gray.opacity(0.2))
  Text("4. given full width & center alignment\n+ multilineTA set to center")
  .multilineTextAlignment(.center)
  .frame(maxWidth: .infinity, alignment: .center)
  .background(Color.gray.opacity(0.2))
  Text("5. given full width & center alignment\n+ multilineTA set to trailing")
  .multilineTextAlignment(.trailing)
  .frame(maxWidth: .infinity, alignment: .center)
  .background(Color.gray.opacity(0.2))
  Text("6. given full width but no alignment\n+ multilineTA at default leading\n+ leading is based on content, looks odd sometimes as seen here")
  .frame(maxWidth: .infinity)
  .background(Color.gray.opacity(0.2))
}
.frame(width: 380)
.background(Color.gray.opacity(0.1))

回答by Miki

We need to align the Text and not the Stack it's in. So calling multilineTextAlignment(.center)and setting the line limits I can be able to see the texts aligned to center. I don't know why I have to set the line limits, I thought it would expand if you have a large text.

我们需要对齐文本而不是它所在的堆栈。因此调用multilineTextAlignment(.center)和设置行限制我可以看到对齐到中心的文本。我不知道为什么我必须设置行限制，我认为如果文本很大，它会扩展。

Text("blahblah")
        .font(.headline)
        .multilineTextAlignment(.center)
        .lineLimit(50)

回答by Kathiresan Murugan

You can set alignment for Vertical stackView as leading. Like below

您可以将 Vertical stackView 的对齐方式设置为前导。像下面

 VStack(alignment: .leading) {
            Text("Turtle Rock")
                .font(.title)
            Text("Joshua Tree National Park")
                .font(.subheadline)
        }

回答by Kamil Zaborowski

If you would like to keep constant width for the Text, the ".multilineTextAlignment(.leading)" won't take any effect until there is only one line of text.

如果你想保持文本的恒定宽度，“.multilineTextAlignment(.leading)”在只有一行文本之前不会生效。

This is the solution that worked for me:

这是对我有用的解决方案：

struct LeftAligned: ViewModifier {
    func body(content: Content) -> some View {
        HStack {
            content
            Spacer()
        }
    }
}


extension View {
    func leftAligned() -> some View {
        return self.modifier(LeftAligned())
    }
}

Usage:

用法：

Text("Hello").leftAligned().frame(width: 300)