How to customize the appearance and behavior of UI elements in SwiftUI using modifiers

SwiftUI modifiers can be applied to views in order to customize their appearance.

Modify a Text view to make it bold:

Text("Simple Swift Guide").bold()

Multiple modifiers can be applied at the same time. Modify a Text view to make it bold, italic, underlined and change text color to red at the same time:

Text("Simple Swift Guide")
    .bold()
    .italic()
    .underline()
    .foregroundColor(.red)

To change font sizing, multiple options are available such as .largeTitle, .title, .headline, .caption or .footnote. Experiment with some of them to see what happens:

Text("Simple Swift Guide").font(.headline)

In previous post, we learned about combining multiple views into stacks. For example, to change the background color of entire stack use the .background modifier:

VStack() {
    Text("Simple Swift Guide").font(.headline)
    Text("A blog about iOS development").font(.subheadline)
}.background(Color.blue)

Related tutorials: