在Text
视图的许多属性中,我找不到与文本对齐有关的任何内容。我在一个演示中看到它可以自动处理RTL,并且在使用View放置东西时body
,它总是自动居中。
关于布局系统,我是否缺少一些概念,SwiftUI
如果没有,如何将文本对齐属性设置为Text
?
Answers:
尝试将此理解自己作为其他的答案在这里提到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))
.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
。
.multilineTextAlignment
这指定了文本的内部对齐方式,当有多行时,最好地看到它;否则,如果没有定义frame(width:alignment)
,则宽度会自动调整,并受默认alignment
s的影响。
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))
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))
我猜想SwiftUI
我们要使用像堆栈之类的包装器来处理此类事情。
因此Text("Hello World").aligned(.leading)
,鼓励不要编写类似的代码,而是鼓励以下内容:
VStack(alignment: .leading) {
Text("Hello World")
}
如果您希望保持文本的恒定宽度,则“ .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)
我想使用Spacer()视图来对齐文本块。此示例在末尾显示文本:
HStack{
Spacer()
Text("Wishlist")
}