1.3_如何使用字体颜色行距等设置文本视图的样式

Text 不仅在外观方面可以让我们进行可预测的广泛控制，而且它们还可以与 Dynamic Type 等 Apple 的核心技术无缝协作。

1. 设置字体

默认情况下，文本视图有一个 Body 动态类型样式，但是我们可以通过以下方式调用 .font()，从其它 sizes 和 weights 进行选择:

struct ContentView: View {
    var body: some View {
        // 1. 设置字体
        Text("This is an extremely long text string that will never fit even the widest of Phones")
            .font(.largeTitle)
    }
}

效果预览: 我们现在在文本视图下面使用了两个修改器，这没关系 - 我们可以将它们堆叠起来，并且它们都会生效。

2. 设置文本对齐方式

特别是，现在我们有多行文本，我们需要调整文本的对齐方式，使其居中，如下所示:

struct ContentView: View {
    var body: some View {
        // 2.设置文本对齐方式
        Text("This is an extremely long string that will never fit even the widest of Phones")
            .font(.largeTitle)
            .multilineTextAlignment(.center)
    }
}

效果预览:

3. 设置字体颜色

我们可以通过 .foregroundColor() 修改器来设置文本颜色，如下所示:

struct ContentView: View {
    var body: some View {
        // 3. 设置字体颜色
        Text("The best laid plans")
            .foregroundColor(.red)
    }
}

效果预览:

4. 设置背景颜色

我们可以使用 .background() 来设置背景颜色，但是它不仅仅可以用来设置背景颜色，也可以设置背景视图。无论如何，为了给我们的文本视图设置一个黄色背景，代码如下:

struct ContentView: View {
    var body: some View {
        // 4. 设置背景颜色
        Text("The best laid plans")
            .foregroundColor(.red)
            .background(Color.yellow)
    }
}

效果预览:

5. 设置行间距

我们可以设置多行文本的行间距，行间距默认值为0，表示没有额外的行间距，但是我们可以通过以下方式在行与行之间指定一个值来添加额外的行间距。

struct ContentView: View {
    var body: some View {
        // 5.设置行间距
        Text("This is an extremely long string that will never fit even the widest of Phones")
            .font(.largeTitle)
            .lineSpacing(50)
    }
}

效果预览: