Text view and modifiers in iOS Swift

Introduction

Text views show words on the screen. Modifiers change how the text looks or behaves.

To display a title or label in your app.

To show instructions or messages to the user.

To style text with colors, fonts, or alignment.

To make text bold, italic, or underlined.

To add padding or background behind text.

Syntax

iOS Swift

Text("Your text here")
  .modifier1()
  .modifier2()

Use Text to create a text view.

Chain modifiers after Text to change its style or layout.

Examples

Simple text showing "Hello, world!" on screen.

iOS Swift

Text("Hello, world!")

Text with a large title font and blue color.

iOS Swift

Text("Welcome")
  .font(.title)
  .foregroundColor(.blue)

Text that is bold and italic.

iOS Swift

Text("SwiftUI")
  .bold()
  .italic()

Text with space around it and a yellow background.

iOS Swift

Text("Padded Text")
  .padding()
  .background(Color.yellow)

Sample App

This app shows three text views stacked vertically. Each text uses different modifiers to change font, color, style, and background.

iOS Swift

import SwiftUI

struct ContentView: View {
  var body: some View {
    VStack(spacing: 20) {
      Text("Hello, SwiftUI!")
        .font(.largeTitle)
        .foregroundColor(.purple)
      Text("This is a simple text view.")
        .font(.body)
        .italic()
      Text("Styled Text")
        .bold()
        .padding()
        .background(Color.green.opacity(0.3))
        .cornerRadius(8)
    }
    .padding()
  }
}

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup {
      ContentView()
    }
  }
}

Important Notes

Modifiers do not change the original text but create a new styled view.

Order of modifiers can affect the final look.

Use .padding() to add space around text for better touch targets.

Summary

Text shows words on screen.

Modifiers like .font(), .foregroundColor(), and .padding() change text style and layout.

Chain modifiers to combine effects.

Practice

1. What does the Text view do in SwiftUI?

easy

A. Creates a button for user interaction

B. Displays a string of text on the screen

C. Draws a rectangle shape

D. Plays a video clip

Solution

1. Step 1: Understand the role of Text view

   The Text view is designed to show words or sentences on the screen in SwiftUI.

2. Step 2: Differentiate from other views

   Buttons, shapes, and media players serve different purposes, not displaying plain text.

3. Final Answer:

   Displays a string of text on the screen -> Option B

4. Quick Check:

   Text view = shows text [OK]

Hint: Text view always shows words on screen [OK]

Common Mistakes:

• Confusing Text with Button or Image
• Thinking Text plays media
• Assuming Text draws shapes

2. Which of the following is the correct way to change the font size of a Text view to 24 points?

easy

A. Text("Hello").font(.system(size: 24))

B. Text("Hello").fontSize(24)

C. Text("Hello").setFont(24)

D. Text("Hello").fontSize = 24

Solution

1. Step 1: Recall SwiftUI font modifier syntax

   The correct modifier to set font size is .font(.system(size: value)).

2. Step 2: Check each option

   Only Text("Hello").font(.system(size: 24)) uses the correct SwiftUI syntax. Others are invalid or do not exist.

3. Final Answer:

   Text("Hello").font(.system(size: 24)) -> Option A

4. Quick Check:

   Use .font(.system(size:)) for font size [OK]

Hint: Use .font(.system(size:)) to set font size [OK]

Common Mistakes:

• Using non-existent .fontSize modifier
• Trying to assign fontSize property directly
• Confusing method names

3. What will be the color of the text displayed by this code?

Text("Welcome")
  .foregroundColor(.red)
  .foregroundColor(.blue)

medium

A. Red

B. Purple

C. Blue

D. Black (default)

Solution

1. Step 1: Understand modifier chaining order

   Modifiers apply in order; the last .foregroundColor overrides previous ones.

2. Step 2: Identify final color

   The last color set is .blue, so the text color will be blue.

3. Final Answer:

   Blue -> Option C

4. Quick Check:

   Last modifier wins = Blue [OK]

Hint: Last color modifier sets the text color [OK]

Common Mistakes:

• Thinking colors combine or blend
• Assuming first modifier applies
• Ignoring modifier order

4. Identify the error in this SwiftUI code snippet:

Text("Hello")
  .font(.title)
  .padding(10, 20)

medium

A. Padding modifier does not accept two numbers like that

B. Text view cannot have modifiers chained

C. Font modifier .title is invalid

D. Padding modifier requires only one argument

Solution

1. Step 1: Check padding modifier syntax

   The .padding() modifier accepts either no arguments, one argument for uniform padding, or a specific edge set with length.

2. Step 2: Analyze given arguments

   Passing two numbers directly like .padding(10, 20) is invalid syntax in SwiftUI.

3. Final Answer:

   Padding modifier does not accept two numbers like that -> Option A

4. Quick Check:

   .padding() needs one argument or edge set [OK]

Hint: Padding takes one value or edges + value [OK]

Common Mistakes:

• Passing multiple numbers directly to padding
• Confusing padding with frame size
• Assuming .title font is invalid

5. You want to create a Text view that shows "SwiftUI Rocks!" in large bold font, colored green, with padding around it. Which code snippet achieves this correctly?

hard

A. Text("SwiftUI Rocks!")
.font(.bold.largeTitle)
.foregroundColor(.green)
.padding()

B. Text("SwiftUI Rocks!")
.font(.largeTitle.bold)
.foregroundColor(.green)
.padding()

C. Text("SwiftUI Rocks!")
.font(.largeTitle)
.foregroundColor(.green.bold())
.padding()

D. Text("SwiftUI Rocks!")
.font(.largeTitle.bold())
.foregroundColor(.green)
.padding()

Solution

1. Step 1: Apply bold to font correctly

   Using .font(.largeTitle.bold()) chains the bold style properly with the font size.

2. Step 2: Set color and padding

   .foregroundColor(.green) sets the text color, and .padding() adds default padding around the text.

3. Step 3: Check other options for errors

   Text("SwiftUI Rocks!") .font(.largeTitle).bold() .foregroundColor(.green) .padding() tries to call .bold() separately which is invalid on Font. Text("SwiftUI Rocks!") .font(.largeTitle) .foregroundColor(.green.bold()) .padding() tries to bold the color, which is incorrect. Text("SwiftUI Rocks!") .font(.bold.largeTitle) .foregroundColor(.green) .padding() uses invalid font syntax.

4. Final Answer:

   Text("SwiftUI Rocks!") .font(.largeTitle.bold()) .foregroundColor(.green) .padding() -> Option D

5. Quick Check:

   Use .font(.largeTitle.bold()) for bold large font [OK]

Hint: Chain .bold() inside .font() for bold text [OK]

Common Mistakes:

• Calling .bold() separately on Text or Font
• Trying to bold the color
• Using invalid font modifier order