Modifier chaining in iOS Swift

Introduction

Modifier chaining lets you add many style or behavior changes to a UI element in one line. It keeps your code neat and easy to read.

When you want to change the color, size, and font of a text label all at once.

When you want to add padding, background color, and corner radius to a button.

When you want to align and style an image with multiple effects.

When you want to quickly build a styled view by stacking simple changes.

Syntax

iOS Swift

Text("Hello")
  .modifier1()
  .modifier2()
  .modifier3()

Each modifier changes the view and returns a new view with that change.

Modifiers are applied in the order you write them, from top to bottom.

Examples

This makes the text bigger, colors it blue, and adds space around it.

iOS Swift

Text("Hello")
  .font(.title)
  .foregroundColor(.blue)
  .padding()

This styles a button with padding, green background, and rounded corners.

iOS Swift

Button("Tap me") {
  print("Tapped")
}
  .padding()
  .background(Color.green)
  .cornerRadius(10)

This resizes a star icon to 50x50 and colors it yellow.

iOS Swift

Image(systemName: "star.fill")
  .resizable()
  .frame(width: 50, height: 50)
  .foregroundColor(.yellow)

Sample App

This program shows a text "Welcome!" with a large font, white color, blue background, padding around it, and rounded corners.

iOS Swift

import SwiftUI

struct ContentView: View {
  var body: some View {
    Text("Welcome!")
      .font(.largeTitle)
      .foregroundColor(.white)
      .padding()
      .background(Color.blue)
      .cornerRadius(15)
  }
}

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

Important Notes

Modifier chaining is very efficient because each modifier returns a new view with the change.

Order matters: changing background before padding can look different than after padding.

Common mistake: forgetting that modifiers return new views, so you must chain or assign them properly.

Summary

Modifier chaining lets you style and change views step-by-step in one line.

Modifiers apply in order and each returns a new view.

Use chaining to keep your UI code clean and easy to read.