SwiftUI文本对齐


90

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

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

Answers:



85

从SwiftUI beta 3开始,您可以使用frame修饰符将文本视图居中:

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

39

尝试将此理解自己作为其他的答案在这里提到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),则宽度会自动调整,并受默认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))

图片


组合测试:

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

图片


1
这是一个非常令人信服的答案。谢谢。我也会考虑将其作为一个可接受的答案。
inokey

@inokey很高兴分享我的意见:)后来我发现了一篇有趣的文章,介绍了一般的视图对齐方式:SwiftUI中的对齐方式指南
staticVoidMan

很棒的东西人。自从我最初发布该问题以来,SwiftUI确实得到了发展。
inokey

17

我实际上遇到了必须在一行上对齐文本的问题。我发现工作的是这样的:

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

如果将其与frame width参数结合使用,则可以得到一些不错的标签等文本块格式。


14

我猜想SwiftUI我们要使用像堆栈之类的包装器来处理此类事情。

因此Text("Hello World").aligned(.leading),鼓励不要编写类似的代码,而是鼓励以下内容:

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

1
所以我不能只删除一个独立于堆栈的标签吗?
inokey

@inokey我至少没有为此找到一个修饰符。
fredpi

我也没有 在我看来,我想念SUI的某种基本概念。我什至不能像在两件事之间只是“视图”一样掉下来,并给它加上颜色,就像他们那里没有普通的ala-uiview对象一样。
inokey

框架修改器具有对齐参数
EmilioPelaez

似乎必须要做的事很愚蠢(尽管确实可行)。您在哪里听说这受到鼓励?
MobileMon

6

如果您希望保持文本的恒定宽度,则“ .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)

5

我们需要对齐文本,而不是对齐其中的堆栈。因此,调用multilineTextAlignment(.center)并设置行限制,我就能看到文本居中对齐。我不知道为什么我必须设置行数限制,我认为如果您的文字较大,它会扩大。

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

4

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

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

在此处输入图片说明


0

我想使用Spacer()视图来对齐文本块。此示例在末尾显示文本:

                HStack{
                    Spacer()
                    Text("Wishlist")
                }
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.