SwiftUI Introduction

SwiftUI Introduction

Build interfaces declaratively with views, state, and data-driven updates using SwiftUI.

What is SwiftUI?

SwiftUI is Apple's modern UI framework for building apps on iOS, iPadOS, macOS, watchOS, and tvOS.

It is declarative: you describe what the UI should look like, and SwiftUI updates it when your data changes.

Why SwiftUI?

• Declarative syntax and reactive updates with @State, @Binding, and ObservableObject.
• Unified API across Apple platforms.
• Live previews and fast iteration in Xcode.

Building our First "App"

First, you'll build a simple counter view (ContentView) shown by the app entry (App.swift).

Next, you'll refactor the same UI but move its state into a view model (ObservableObject), which scales better in real apps.

Step 1: Basic Example

Syntax: Use @State for local state and bind it to controls (e.g., Button); render with VStack/Text.

import SwiftUI

struct ContentView: View {
  @State private var count = 0

  var body: some View {
    VStack(spacing: 12) {
      Text("Count: \(count)")
      Button("Increment") { count += 1 }
    }
    .padding()
  }
}

import SwiftUI

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

This example shows a simple counter using @State and a button inside a VStack.

Step 2: State with ObservableObject

Use ObservableObject to hold shared state, and @StateObject in the creating view to own its lifecycle.

Views update automatically when @Published properties change.

Syntax: class VM: ObservableObject { @Published var count }, @StateObject private var vm = VM(), bind UI to vm.count.

This example refactors the basic counter above.

The UI and behavior are the same (a counter label and button), but the state now lives in a CounterModel view model managed by @StateObject. This pattern scales better as your app grows.

import SwiftUI
import Combine

class CounterModel: ObservableObject {
  @Published var count = 0
  func increment() { count += 1 }
}

import SwiftUI

struct ContentView: View {
  @StateObject private var model = CounterModel()

  var body: some View {
    VStack(spacing: 12) {
      Text("Count: \(model.count)")
      Button("Increment") { model.increment() }
    }
    .padding()
  }
}

import SwiftUI

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

This example promotes state into a ViewModel and updates the UI via @Published changes observed by the view.

Run Examples in Xcode

Standard workflow (used in this tutorial)

Every example is organized into three files so you can run it as a small app:

1. Demo.swift: The example's main code (view and/or supporting types).
2. ContentView.swift: Shows the demo (references types from Demo.swift).
3. App.swift: Stable app entry with WindowGroup { ContentView() }.

Optional: Canvas Preview

You can also run any example via Xcode's Canvas Preview without changing your app entry point.

1. Create a View file: In Xcode choose File > New > File... > SwiftUI View. Name it (for example, FrameDemo.swift) and paste the example view's code into it.
2. Add a Preview: Ensure the file has a preview. Use either a PreviewProvider or the #Preview macro.

import SwiftUI
  
  struct FrameDemo_Previews: PreviewProvider {
    static var previews: some View { FrameDemo() }
  }

import SwiftUI
  
  #Preview { FrameDemo() }

3. Open the Canvas: With the file selected, choose Editor > Canvas (or click the Canvas button). If you don't see the preview, build the project once.
4. Run the Preview: Click Resume / Play in the Canvas. Edits to the code will refresh the preview. Use the device picker to switch iPhone/iPad models.
5. Interact: Previews are interactive—tap buttons, type into fields, etc.