Text

约 452 字大约 2 分钟

2024-08-02

代码：

Text("Tap me !")
    .font(.largeTitle)
    .fontWeight(.bold)
    .foregroundColor(.white)
    .padding(30)
    .frame(alignment: .center)
    .background(Color.red)
    .cornerRadius(100)

效果：

用法：

设置文本

Text("Hello, World!")

设置文字颜色

通过 foregroundColor 设置文本颜色

Text("Hello, World!")
    .foregroundColor(.red)

设置字体大小

可以通过 font 设置字体大小，指定字形

Text("Hello, World!")
    .foregroundColor(.red)
    .font(.system(size: 30))

修成 largeTitle 的样式而且是圆弧的

Text("Hello, World!")
    .foregroundColor(.red)
    .font(.system(.largeTitle, design: .rounded))

更改字体的字型

Text("Hello, World!")
    .foregroundColor(.red)
    .font(.font(.custom("Courier", size: 30)))

设置字重

可以使用 fontWeight 设置字重

Text("Hello, World!")
    .foregroundColor(.red)
    .font(.system(size: 30))
    .fontWeight(.regular)

设置阴影

可以使用shadow设置阴影

Text("Hello, World!")
    .foregroundColor(.red)
    .font(.custom("Courier", size: 30))
    .fontWeight(.regular)
    .shadow(color: .black, radius: 2, x: 0, y: 15)

设置文本对齐方式

通过 multilineTextAlignment 指定文本的对齐方式。

Text("Hello, World! nice to miss you!")
    .foregroundColor(.red)
    .font(.custom("Courier", size: 30))
    .fontWeight(.regular)
    .shadow(color: .black, radius: 2, x: 0, y: 1)
    .multilineTextAlignment(.center)

限制显示行数

通过 lineLimit 将行数限制为一定数量

Text("Hello, World! welcome to OldBirds ,nice to miss you! see you again ~~ ")
    .foregroundColor(.black)
    .font(.system(size: 50))
    .fontWeight(.regular)
    .lineLimit(3)

设置行间距

通过 lineSpacing 设置行间距

Text("Hello, World! welcome to OldBirds ,nice to miss you! see you again ~~ ")
    .foregroundColor(.black)
    .font(.system(size: 50))
    .fontWeight(.regular)
    .lineSpacing(20)

旋转文字

2D 旋转

Text("Hello, World! welcome to OldBirds ,nice to miss you! see you again ~~ ")
    .foregroundColor(.blue)
    .font(.system(size: 25))
    .rotationEffect(.degrees(20), anchor: UnitPoint(x: 0, y: 0))

3D 旋转

Text("Hello, World! welcome to OldBirds ,nice to miss you! see you again ~~ ")
    .foregroundColor(.blue)
    .font(.system(size: 25))
    .rotation3DEffect(.degrees(60), axis: (x: 1, y: 0, z: 0))

Text

公告