Introduction to SwiftUI

SwiftUI is Apple’s framework for building user interfaces with Swift.

You can use it across iOS, iPadOS, macOS, watchOS, tvOS, and visionOS. Many views adapt their appearance and behavior to the platform where they run.

SwiftUI uses a declarative approach. You describe what the interface should display for the current data, and SwiftUI updates the affected views when that data changes.

This is different from manually creating every view and telling it how to update after each event.

Does SwiftUI replace UIKit and AppKit?

No.

SwiftUI is the recommended starting point for many new interfaces, but UIKit, AppKit, and WatchKit are still supported frameworks.

You can put a SwiftUI view inside an existing UIKit or AppKit app. You can also wrap a UIKit view or view controller and use it inside SwiftUI.

This lets you adopt SwiftUI one screen at a time. It also helps when SwiftUI does not provide a feature your app needs.

The structure of a SwiftUI app

A SwiftUI app starts with a type that conforms to the App protocol:

import SwiftUI

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

The @main attribute marks the app’s entry point.

The body property returns a scene. A scene represents part of the interface with a lifecycle managed by the system.

WindowGroup is the usual main scene for an app. It contains the root view, which is ContentView in this example.

Creating a view

You create a custom view by defining a structure that conforms to the View protocol:

import SwiftUI

struct ContentView: View {
  var body: some View {
    Text("Hello, world!")
  }
}

The View protocol requires a body computed property. The value returned by body describes that part of the interface.

Views can contain other views. Use a stack to arrange several views:

struct ContentView: View {
  var body: some View {
    VStack {
      Text("Hello, world!")
      Text("Welcome to SwiftUI")
    }
  }
}

VStack arranges its child views vertically. SwiftUI also provides HStack, ZStack, lists, grids, forms, and many other containers.

What does some View mean?

You will see some View in almost every SwiftUI file.

some creates an opaque result type. It tells callers that body returns a value conforming to View without exposing the long concrete type produced by the view hierarchy.

The compiler still knows the exact underlying type and checks it at compile time. SwiftUI’s result builder also lets you write multiple child views and supported conditionals inside body.

You do not normally need to write the concrete type yourself.

Configuring views with modifiers

You customize a view by applying modifiers:

Text("Hello, world!")
  .font(.title)
  .bold()
  .padding()

Each modifier returns a new view that wraps or configures the previous one.

The order can matter. For example, adding a background before padding gives a different result than adding it after padding.

Connecting a view to state

The interface becomes interesting when it changes in response to data.

Use @State for a small value owned by one view:

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

  var body: some View {
    VStack {
      Text("Count: \(count)")

      Button("Add one") {
        count += 1
      }
    }
  }
}

When the button changes count, SwiftUI updates the parts of the interface that read it.

Declare state as private and keep it in the highest view that owns the value. Pass a binding to a child view when that child needs to change the value.

Use an observable model for application data shared by several views. @State is best for temporary interface state, not permanent storage.

Views are descriptions

A SwiftUI view structure is a lightweight value describing part of the interface. SwiftUI can create that value and evaluate its body many times.

Do not treat a view structure like a long-lived view controller. Keep mutable data in state or a model, and avoid starting network requests or other side effects directly while computing body.

Use lifecycle modifiers such as task, onAppear, and onChange when the view needs to perform work.

Previewing a view in Xcode

Xcode can show a live preview next to your Swift code:

#Preview {
  ContentView()
}

Previews are useful for checking different data, screen sizes, accessibility settings, and appearance modes without navigating through the whole app.

You still need to run the app on simulators and real devices. A preview does not replace normal testing.

Starting a SwiftUI project

Open Xcode and create a new app project. Select SwiftUI for the interface when Xcode offers the choice.

Xcode creates an App type, a WindowGroup, and an initial view. Start by changing that view and running the project.

Check the deployment target before using a new SwiftUI API. SwiftUI evolves with each Apple platform release, and an API available in the current SDK might require a newer operating system than your app supports.

The official SwiftUI documentation covers the framework, and Apple’s SwiftUI pathway is a good place to continue learning.

Related posts about swift: