SwiftUI - Customize Text View

Text view is the most powerful and flexible view in SwiftUI, it is used to display text in various styles and layouts in the UI of an app. The text displayed by the Text view is static, it is not editable. It also provides various in-built modifiers to control text's font, color, alignment, spacing, etc. Apart from displaying text on the screen, the Text view is also used for headings, labellings, paragraphs, etc

Displaying Text using Text View in SwiftUI

In SwiftUI, we can display text very easily with the help of Text View. Text view displays any single or multi line string on the screen and can also provide various modifiers to customize the appearance of the string on the screen. To display a line of string we need to initialize Text() with the string value that we want to display

Syntax

Following is the syntax −

Text("Write your text here..")

Example

The following SwiftUI program is used to create a text view.

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{            
         // Text view
         Text("TutorialsPoint")
      }
   }
}
#Preview {
   ContentView()
}

Output

Customize Text View in SwiftUI

Customizing the text view means we can change the visual appearance and behavior of the text according to our design requirements using the modifiers provided by SwiftUI.

Using these modifiers we can change the shape, size, color, alignment etc., of the text view. SwiftUI provide various in-built modifiers to customize the text and some of the commonly used modifiers are as follows −

Example

The following SwiftUI program is used to customize text view.

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         Text("TutorialsPoint")
            .font(.title)
            .underline(true, color: .red)
         Text("TutorialsPoint")
            .font(.title)
            .strikethrough()
         Text("TutorialsPoint")
            .background(Color.gray)
            .foregroundStyle(.white)
            .lineLimit(2)
         Text("TutorialsPoint")
            .border(.orange)
            .padding(5)
            .font(.title)
            .tracking(4.0)
      }
   }
}

#Preview {
   ContentView()
}

Output