Text

12/5/2021 swiftiosswiftui

# Text

代码:

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))
    

上次更新: 5/5/2022, 8:45:22 AM