The Text() component is a view that displays one or more lines of read-only text.

• Simple Text
• Text() with font Styling
• Text() with fontWeight Styling
• Text() with foregroundColor Styling
• Text with Text Alignment Styling
• Text with line limit Styling

Simple Text

Basic Text Component.

     Text("Hello World")

Text() with font Styling

Change the font Style of the Text Component.

        VStack
        {
            Text("Hello World").font(.largeTitle)
            Text("Hello World").font(.title)
            Text("Hello World").font(.headline)
            Text("Hello World").font(.subheadline)
            Text("Hello World").font(.body)
            Text("Hello World").font(.footnote)
            Text("Hello World").font(.caption)
        }

Text() with fontWeight Styling

Change the fontWeight of the Text Component.

        
        VStack
        {
            Text("Hello World")
                .fontWeight(.ultraLight)
            Text("Hello World")
                .fontWeight(.thin)
            Text("Hello World")
                .fontWeight(.light)
            Text("Hello World")
                .fontWeight(.regular)
            Text("Hello World")
                .fontWeight(.medium)
            Text("Hello World")
                .fontWeight(.semibold)
            Text("Hello World")
                .fontWeight(.heavy)
            Text("Hello World")
                .fontWeight(.black)
                
        } 

Text() with foregroundColor Styling

Change the font color of the Text Component.

       VStack
       {
            Text("Hello World")
                .foregroundColor(Color.red)
            Text("Hello World")
                .foregroundColor(Color.blue)
            Text("Hello World")
                .foregroundColor(Color.yellow)
        }

Text with Text Alignment Styling

Change the text alignment of a multiline Text Component.

• Leading (left aligned)
• Center (center aligned)
• Trailing (right aligned)

        VStack
                {
                   
                    Text("""
                         Lorem ipsum dolor sit amet, consectetur
                          adipiscing elit. Nullam placerat, libero eget
                          egestas dictum, lectus neque blandit nulla,
                          ut eleifend lacus diam suscipit arcu. Morbi
                          laoreet pretium elit, nec faucibus orci.
                        """)
                        .multilineTextAlignment(.leading)
                    
                    Spacer()//Adds Space between Text
                    
                    Text("""
                          Lorem ipsum dolor sit amet, consectetur
                          adipiscing elit. Nullam placerat, libero eget
                          egestas dictum, lectus neque blandit nulla,
                          ut eleifend lacus diam suscipit arcu. Morbi
                          laoreet pretium elit, nec faucibus orci.
                         """)
                        .multilineTextAlignment(.center)
                    
                    Spacer()//Adds Space between Text
                    
                    Text("""
                          Lorem ipsum dolor sit amet, consectetur
                          adipiscing elit. Nullam placerat, libero eget
                          egestas dictum, lectus neque blandit nulla,
                          ut eleifend lacus diam suscipit arcu. Morbi
                          laoreet pretium elit, nec faucibus orci.
                        """)
                        .multilineTextAlignment(.trailing)
                    
                }.padding()

    }

Text with line limit Styling

Change the line limit of the Font Text Component.

 VStack
         {
           Text("""
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Nullam placerat, libero eget egestas dictum, lectus neque
            blandit nulla, ut eleifend lacus diam suscipit arcu. Morbi
            laoreet pretium elit, nec faucibus orci.
            """)
            .lineLimit(3)

          }.padding()

Recommended Books