SwiftUI 文本对齐

Question

在 Text 视图的众多属性中，我找不到任何与文本对齐相关的属性。我在演示中看到它会自动处理 RTL，并且在使用视图 body 放置内容时，它总是自动将其居中。

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

Answer 1

我想 SwiftUI 希望我们对这些东西使用像堆栈这样的包装器。

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

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

Answer 2

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

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

Answer 3

您可以通过修饰符 .multilineTextAlignment(.center) 执行此操作。

Apple Documentation

Answer 4

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

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

Answer 5

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

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

Answer 6

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

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

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

Answer 7

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

Answer 8

我自己试图理解这一点，因为这里提到的其他答案提到 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))

Answer 9

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

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

Answer 10

不确定这是否是您正在寻找的答案，但我已经体验过 SwiftUI 会自动切换到阿拉伯语等语言的 RTL，您不需要像在 UIKit 中那样明确指定。

Answer 11

我遇到了同样的问题。我用它来解决这个问题。

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

Answer 12

您始终可以向文本字段添加框架并修改其对齐方式。

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

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

Answer 13

您可以使用下面的行，具体取决于您希望如何移动文本 .multilineTextAlignment(.center)

SwiftUI 文本对齐

SwiftUI text-alignment

ios

swift

swiftui

`VStack(alignment:)`

`.frame`

`.multilineTextAlignment`

组合测试：