SwiftUI文本对齐方式

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

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

220543 次浏览
小开

我猜SwiftUI想让我们使用像堆栈这样的包装器。

因此，与其编写类似Text("Hello World").aligned(.leading)的代码，不如鼓励使用以下代码:

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

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

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

enter image description here

小开
最佳答案

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

Text("CENTER")
.multilineTextAlignment(.center)

苹果文档 .

小开

从SwiftUI beta 3开始，你可以用框架修饰符居中文本视图:

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

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

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

我实际上遇到了一个问题，我必须在单行上对齐文本。我发现有效的方法是:

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

如果你把它和帧宽参数结合起来，你可以得到一些漂亮的文本块格式的标签等。

小开

如果你想为文本保持恒定的宽度，“. multilinetextalignment (.leading)”在只有一行文本之前不会起任何作用。

这是对我有效的解决方案:

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




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

用法:

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

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

VStack(alignment:)

这里的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))

image

.frame

在frame(width:alignment:)或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))

内部视图是前导对齐的，但视图本身是尾随对齐的，对应VStack。

image

.multilineTextAlignment

这指定了里面文本的对齐方式，当有多行时最清晰，否则没有定义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))

image

组合测试:

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))

image

小开
我想使用Spacer()视图来对齐文本块。 这个例子显示了后面的文本:

HStack{
Spacer()
Text("Wishlist")
}
小开

不确定这是否是你想要的答案，但我有经验，SwiftUI自动切换到RTL的语言，如阿拉伯语，你不需要像UIKit中那样显式地指定。

小开
我也有同样的问题。 

Text("Test")
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
小开

你总是可以添加一个框架到文本字段，并可以修改它的对齐方式。

Text("Hello World!")
.frame(alignment : .topLeading)

因为，这只是为了几行-这比在任何一个堆栈上使用对齐要好

小开

你可以根据你想要如何移动文本来使用下面的行 .multilineTextAlignment(.center) < / p >


提交答案