如何使用 Text 视图创建静态标签？

默认情况下，文本视图会根据需要自动换行，但是如果您希望限制它们可以使用的行数，则应添加 lineLimit 修饰符

Text("This is some longer text that is limited to three lines maximum, so anything more than that will cause the text to clip.")
    .lineLimit(3)
    .frame(width: 200)

如何使用字体，颜色，行距等为文本视图设置样式？

文本视图不仅在外观上为我们提供了可预期的广泛控制，而且还旨在与Apple核心技术（例如Dynamic Type）无缝地协同工作。

默认情况下，“Text”视图具有“正文”动态类型样式，但是您可以通过在其上调用 .font() 来从其他大小和权重中进行选择，如下所示：

Text("This is an extremely long text string that will never fit even the widest of phones without wrapping")
    .font(.largeTitle)
    .frame(width: 300)

我们可以使用 .foregroundColor() 修饰符控制文本的颜色，如下所示

Text("The best laid plans")
    .foregroundColor(Color.red)

您还可以设置背景颜色，但是它使用 .background()，因为可以使用比纯色更高级的背景。无论如何，要为我们的布局提供黄色背景色，我们可以添加以下内容：

Text("The best laid plans")
    .padding()    
    .background(Color.red)
    .foregroundColor(.white)
    .font(.headline)

还有更多选择。例如，我们可以调整文本中的行距。默认值为0，表示没有应用额外的行距，但是您也可以指定位置值以在行之间添加额外的行距：

Text("This is an extremely long text string that will never fit even the widest of phones without wrapping")
    .font(.largeTitle)
    .lineSpacing(50)
    .frame(width: 300)

如何使用 multilineTextAlignment() 调整文本对齐方式

当 SwiftUI 的 “Text” 视图跨多行换行时，默认情况下它们会对齐其前沿。如果要更改此设置，请使用 multilineTextAlignment() 修饰符指定其他选项，例如 .center 或 .trailing。

例如，这将使多行文本跨行居中：

Text("This is an extremely long text string that will never fit even the widest of phones without wrapping")
    .font(.largeTitle)
    .multilineTextAlignment(.center)
    .frame(width: 300)

您可以使用如下所示的选择器并排比较所有三个文本对齐方式：

struct ContentView: View {
    let alignments: [TextAlignment] = [.leading, .center, .trailing]
    @State private var alignment = TextAlignment.leading

    var body: some View {
        VStack {
            Picker("Text alignment", selection: $alignment) {
                ForEach(alignments, id: .self) { alignment in
                    Text(String(describing: alignment))
                }
            }

            Text("This is an extremely long text string that will never fit even the widest of phones without wrapping")
                .font(.largeTitle)
                .multilineTextAlignment(alignment)
                .frame(width: 300)
        }
    }
}

如何在文字中的字母之间增加空格？

这两个修饰符是 tracking() 和 kerning()：两者都增加了字母之间的间距，但是 tracking 会拉开连字，而 kerning 不会，而 kerning 会留下一些尾随空白，而 tracking 不会。

如果您想真正了解字距调整和跟踪有何不同，请尝试以下操作：

struct ContentView: View {
    @State private var amount: CGFloat = 50

    var body: some View {
        VStack {
            Text("ffi")
                .font(.custom("AmericanTypewriter", size: 72))
                .kerning(amount)
            Text("ffi")
                .font(.custom("AmericanTypewriter", size: 72))
                .tracking(amount)

            Slider(value: $amount, in: 0...100) {
                Text("Adjust the amount of spacing")
            }
        }
    }
}

它使用了 American Typewriter 中的文本字符串“ ffi”，该字符串具有连字格式，使字母组合看起来更好。由于跟踪将连字分开，字距调整也不会分开，因此当您向上调整滑块时，第一个文本看起来更像“ f fi”，第二个文本看起来更像“ f f i”。

如何在文字检视中格式化日期？

处理单个日期时，应提供一个 style 参数来确定日期的格式。以下是一些选项：

VStack {
    // 只显示日期
    Text(Date().addingTimeInterval(600), style: .date)

    // 只显示时间
    Text(Date().addingTimeInterval(600), style: .time)

    // 显示从现在开始的相对距离，并自动更新
    Text(Date().addingTimeInterval(600), style: .relative)

    // 制作计时器样式，自动更新
    Text(Date().addingTimeInterval(600), style: .timer)
}

如何使用 textCase() 使 TextField 大写或小写？

SwiftUI 的 TextField 视图通常允许用户以他们希望的任何大小写文本，但是如果要控制，则可以使用 textCase() 修饰符强制使用大写或小写文本。

例如，这要求用户输入他们的名字，并在每个字母大写：

struct ContentView: View {
    @State private var name = "Paul"

    var body: some View {
        TextField("Shout your name at me", text: $name)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .textCase(.uppercase)
            .padding(.horizontal)
    }
}

如何使用 Label 并排显示文本和图标？

SwiftUI 具有专用的视图类型，用于并排显示文本和图标，这对于菜单，列表等尤其有用。

要使用标签，您可以使用 SF 符号，如下所示：

Label("Your account", systemImage: "person.crop.circle")

您可以使用 font() 修饰符并行缩放文本和图标，如下所示：

Label("Your account", systemImage: "person.crop.circle")
    .font(.title)

您可以使用 TitleOnlyLabelStyle()，IconOnlyLabelStyle() 和 TitleAndIconLabelStyle() 应用 labelStyle() 修饰符来控制标签的显示方式，如下所示：

VStack {
    Label("Text Only", systemImage: "heart")
        .font(.title)
        .labelStyle(TitleOnlyLabelStyle())

    Label("Icon Only", systemImage: "star")
        .font(.title)
        .labelStyle(IconOnlyLabelStyle())

    Label("Both", systemImage: "paperplane")
        .font(.title)
        .labelStyle(TitleAndIconLabelStyle())
}

如果需要，可以为文本和图像提供完全自定义的视图，如下所示：

Label {
    Text("Paul Hudson")
        .foregroundColor(.primary)
        .font(.largeTitle)
        .padding()
        .background(Color.gray.opacity(0.2))
        .clipShape(Capsule())
} icon: {
    RoundedRectangle(cornerRadius: 10)
        .fill(Color.blue)
        .frame(width: 64, height: 64)
}

如何使用 redacted() 将内容标记为占位符？

SwiftUI 允许我们在视图中将文本标记为占位符，这意味着它会被渲染，但会被灰色掩盖以表明它不是最终内容。这是通过 redacted(reason:) 修饰符以及 unredacted() 修饰符提供的，您可以根据需要使用它们覆盖重写。

它在代码中的外观如下：

使用静态文本