8. SwiftUI: Creating rich text with Text view

Hui Wang
Jan 21, 2022
1 min read

Here I will show you how to use the Text view to create rich text by connecting multiple Text views of different styles.

Knowledge points:

First, set the font color to blue.
Then, set the heavy effect for the text.

Text("Hello World!")
            .foregroundColor(.blue)
            .fontWeight(.heavy)

Call the "+" method of the Text view to connect another Text view, this method can connect the two Text views and return a new Text view.
Set the color of the second Text view to red and add a strikethrough effect to the text.

+ Text("Tutorials ")
            .foregroundColor(.red)
            .strikethrough()

Use the "+" method to connect the third Text view.
Set the font color of the Text view to green and add italic effect to the text.

+ Text("for ")
            .foregroundColor(.green)
            .italic()

In the same way, continue to connect the fourth Text view.
Finally, set the font color of the fourth Text view to orange and add an underline effect to the text.

+ Text("SwiftUI")
            .foregroundColor(.orange)
            .underline()

After code:

struct ContentView: View {
    
    var body: some View {
        Text("Hello World!")
            .foregroundColor(.blue)
            .fontWeight(.heavy)
        
        + Text("Tutorials ")
            .foregroundColor(.red)
            .strikethrough()
        
        + Text("for ")
            .foregroundColor(.green)
            .italic()
        
        + Text("SwiftUI")
            .foregroundColor(.orange)
            .underline()
    }
}