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