Text

Code:

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

Effect:

Usage:

Set the text

Text("Hello, World!")
Copy the code

Set text color

Set the text color with foregroundColor

Text("Hello, World!")
    .foregroundColor(.red)
Copy the code

Set font size

Font can be used to set the font size and specify the glyph

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

Make it largeTitle style and it’s circular

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

Change the font type

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

Set the word again

You can use fontWeight to set the word weight

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

Set the shadow

You can use shadow to set shadows

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

Sets the text alignment

The alignment of the text is specified by 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)
Copy the code

Limit the number of rows displayed

Limit the number of rows to a certain number through lineLimit

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

Set line Spacing

Set the lineSpacing by lineSpacing

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

Rotate the text

  • 2 d rotation

    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))
Copy the code

  • 3 d rotation

    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))
Copy the code

Pay attention to more articles: