SwiftUI文本

SwiftUI学习

基础控件

使用Text视图显示指定的文字

代码

```
import SwiftUI

struct ContentView: View {
    //body的属性为View协议，View是Swift UI所有界面元素的基础类型
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
                .bold()//加粗
            Text("Hello, world!")
                .fontWeight(Font.Weight.heavy)//设置加粗的效果
            Text("Hello, world!")
                .fontWeight(Font.Weight.ultraLight)//设置文本纤细的效果
            Text("Hello, world!")
                .italic()//倾斜
            Text("Hello, world!")
                .underline()//添加下划线
            Text("Hello, world!")
                .underline(true,color: .orange)//设置下划线的颜色为橙色
            Text("Hello, world!")
                .strikethrough()//添加删除线
            Text("Hello, world!")
                .strikethrough(true,color: .green)//设置删除线为橙色
            Text("Hello, world!")
                .foregroundColor(.orange)//设置文本颜色
            Text("Hello, world!")
                .background(Color.blue)//设置背景颜色为蓝色
            Text("Hello, world!")
                .baselineOffset(CGFloat(10.0))//设置文字内容在文本视图上的偏移值
                .background(Color.orange)//基于点语法的链式特点，我们可以非常方便给文本视图添加多个属性
            Text("Hello, world!")
                .background(Image(systemName: "globe"),alignment: .bottom)//将一张图片作为文本视图的背景，并设置文本内容位于文本视图的底部。
            Text("Hello, world!")
                .font(.footnote)//设置文字的尺寸为注脚尺寸
            Text("Hello, world!")
                .font(.system(size:36))//设置文字尺寸
            Text("Hello, world!")
                .font(.system(.title,design: .monospaced))//设置文字的字体为标题样式，该样式可以根据屏幕尺寸的大小，自动调节自身的大小
            Text("Hello, world!")
                .font(.custom("BradleyHandITCTT-Bold", size: 36))//设置自定义的文本视图
        }
    }
}

#Preview {
    ContentView()
}

预览

Text视图的段落属性

通过段落属性调整文本的字距、行距、偏移值、框架和对齐方式等视觉样式

代码

import SwiftUI

struct ContentView: View {
    //body的属性为View协议，View是Swift UI所有界面元素的基础类型
    var body: some View {
        VStack {
            Text("Hello, world!")
            Text("Hello, world!")
                .tracking(10)//字距
            Text("Hello, world!")
                .kerning(10)
            Text("Hello, world!")
                .blur(radius: 1)//模糊
            Text("SwiftUI is a powerful and intuitive framework for building user interfaces across all Apple platforms. With SwiftUI, you can create beautiful and interactive apps using a declarative syntax that makes your code more readable and maintainable.")
                .lineSpacing(20)
                .lineLimit(nil)//设置文本的行距，同时不限制文字的行数
            Text("Hello, world!")
                .offset(x:40,y:0)//设置文字内容在水平方向上向右偏移40点的距离
            Text("Hello, world!")
                .position(x:50,y:50)
            //调用文本视图的位置属性，会使得对齐属性失效，从文本视图的左上角（x:0,y:0)，向右向下各偏移50点的位置
                .frame(width: 200,height: 60,alignment: .bottomTrailing)
                .background(Color.orange)//设置文本视图的宽度和长度，并设置文字在视图的右下角
            Text("Hello,world!\ngkfibhbgu\nsbhvuf\nebfhiw")
                .lineLimit(4)//设置可以显示4行文字
                .frame(width: 200,height: 100)
                .multilineTextAlignment(.center)//居中对齐
        }
    }
}

#Preview {
    ContentView()
}

预览

• 在 SwiftUI 中，Text 视图的 tracking 和 kerning 修饰符都用于调整文本字符之间的间距，但它们的作用方式有所不同。

.tracking(_:)

• 作用：tracking 修饰符用于设置整个文本字符串中所有字符之间的固定间距。它接受一个 CGFloat 值作为参数，该值表示要添加到每个字符之间间距的额外像素数。
• 效果：这个值是固定的，无论字符本身的标准字距如何，都会在每个字符之间加上相同的额外间距。
• 使用场景：当你想要在整个文本中均匀地增加或减少字符间距时，可以使用 tracking。

.kerning(_:)

• 作用：kerning 修饰符用于设置相邻字符之间的间距调整。它也接受一个 CGFloat 值作为参数，该值表示要添加到相邻字符之间的额外像素数。
• 效果：kerning 是基于字体本身的字距表来调整的。这意味着对于某些字符对，可能已经有特定的字距调整（例如，“A”和“V”通常会有较小的间距），kerning 会在这个基础上进一步调整。
• 使用场景：当你希望根据字符对的具体情况来微调字符间距时，可以使用 kerning。

Text文本的填充属性

修改文字内容和文本视图边框之间的距离（内边距)

代码

import SwiftUI

struct ContentView: View {
    //body的属性为View协议，View是Swift UI所有界面元素的基础类型
    var body: some View {
        VStack {
            
            Text("Hello, world!")
                .background(Color.blue)
                .foregroundColor(.white)
                .padding(20)//增加文本视图和文字内容的间距
            Text("Hello, world!")
                .padding(20)//链式结构的调用从上而下
                .background(Color.blue)
                .foregroundColor(.white)
            Text("Hello, world!")
                .padding(20)
                .background(Color.blue)
                .foregroundColor(.white)
                .padding(15)//增加新的内边距
                .background(Color.gray)//可设置新的颜色
                .padding(10)
                .background(Color.primary)
        }
    }
}

#Preview {
    ContentView()
}

预览