193

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

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

4

11 回答 11

308

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

苹果文档

于 2019-06-18T12:55:06.940 回答
218

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

Text("Centered")
    .frame(maxWidth: .infinity, alignment: .center)
于 2019-07-08T16:41:52.677 回答
142

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

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

图片

于 2020-04-10T11:39:58.037 回答
28

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

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

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

于 2020-01-31T19:18:09.307 回答
21

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

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

VStack(alignment: .leading) {
    Text("Hello World")
}
于 2019-06-04T12:20:38.950 回答
16

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

Text("blahblah")
        .font(.headline)
        .multilineTextAlignment(.center)
        .lineLimit(50)
于 2019-09-11T09:09:41.440 回答
13

如果您想保持文本的恒定宽度，则“.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)
于 2020-03-06T16:42:17.737 回答
13

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

HStack{
    Spacer()
    Text("Wishlist")
}
于 2020-11-04T14:19:53.087 回答
8

您可以将垂直堆栈视图的对齐设置为前导。像下面

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

在此处输入图像描述

于 2019-06-04T12:38:24.380 回答
5

我有同样的问题。我用它来修复它。

Text("Test")
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
于 2021-12-04T18:04:00.347 回答
1

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

于 2021-05-23T08:14:48.370 回答