SwiftUI — Text()

这一节就开始讲SwifUI中的组件了，首先我们说一下用于显示文本内容的Text()组件。

基本参数设置

主要基本参数有

• .font(.title) // 字体
• .fontWeight(.semibold) // 字重
• .bold() // 粗体
• .multilineTextAlignment(.center) // 多行文本的对其方式
• .underline() // 下划线：默认黑色
• .underline(true, color: Color.green) // 自定义下划线
• .italic() // 斜体
• .strikethrough() // 删除线：默认黑色
• .strikethrough(true, color: Color.orange)

struct TextSample: View {
    
    var body: some View {
        VStack {
            Text("Hi, welcome!") // 显示的文本内容
                .font(.title) // 字体
                .fontWeight(.semibold) // 字重
                .bold() // 粗体
                .multilineTextAlignment(.center) // 多行文本的对其方式
                //.underline() // 下划线：默认黑色
                .underline(true, color: Color.green) // 自定义下划线
                .italic() // 斜体
                //.strikethrough() // 删除线：默认黑色
                .strikethrough(true, color: Color.orange) // 自定义删除线眼色
        }
    }
}

其他参数

1. 自定义字体

Text("Hi, welcome! This is Text() Components in SwiftUI, try to copy this code, and paste it into you Swiftui file, and you can see the effect") // 显示的文本内容
                .font(.system(size: 24, weight: .semibold, design: .monospaced))

这里使用了系统自定义的字体，字号为24.
如果你使用固定的24，而不是系统定义的例如： .title 来设置字体时，会有以下问题：

1. 在手机不同模式下，你的字体不会随着模式改变，会一直固定为24
2. 而使用系统提供的设置字号的方法，他会在不同平台，不同模式下有不同的字号

下面是苹果官方设计网站的效果，以下是动态字体的大小

地址：developer.apple.com/design/huma…

2. 设置行间距

设置多行字体行间距

.baselineOffset(100)

3. 字间距

设置字母与字母之间的距离

.kerning(10)

4. 设置固定大小

设置固定大小和多行文本对其方式

.frame(width: 200, height: 100, alignment: .center)

当你设置多行文本，但是设置了固定大小，这时会有部分文本无法显示。此时我们可以使用以下属性来设置

5. 最小比例因子

设置缩小的比例，和源字体的比例

.minimumScaleFactor(0.1) // 缩小到原来字体的1/10

6. 大小写设置

大小写，首字母大写设置

Text("Hi, welcome! This is Text() Components in SwiftUI, try to copy this code, and paste it into you Swiftui file, and you can see the effect".capitalized)

Text("Hi, welcome! This is Text() Components in SwiftUI, try to copy this code, and paste it into you Swiftui file, and you can see the effect".lowercased())

Text("Hi, welcome! This is Text() Components in SwiftUI, try to copy this code, and paste it into you Swiftui file, and you can see the effect".uppercased())

---

下面是整个教程中使用到的样式

struct TextSample: View {

    var body: some View {
        VStack {
            Text("Hi, welcome! This is Text() Components in SwiftUI, try to copy this code, and paste it into you Swiftui file, and you can see the effect".uppercased()) // 显示的文本内容
//                            .font(.title) // 字体
//                            .fontWeight(.semibold) // 字重
//                            .bold() // 粗体
//                            .multilineTextAlignment(.center) // 多行文本的对其方式
//                            .underline() // 下划线：默认黑色
//                            .underline(true, color: Color.green) // 自定义下划线
//                            .italic() // 斜体
//                            .strikethrough() // 删除线：默认黑色
//                            .strikethrough(true, color: Color.orange) // 自定义删除线眼色
//                              .font(.system(size: 24, weight: .semibold, design: .monospaced))
//                            .baselineOffset(100)
//                            .kerning(10)
//                            .multilineTextAlignment(.center)
//                            .foregroundStyle(Color.blue)
//                            .frame(width: 200, height: 100, alignment: .center)
//                            .minimumScaleFactor(0.1)
        }
    }
}

好了，Text的就这么多了。

每天进步一点点！