SwiftUI for Swift: Complete Guide with Examples

What is SwiftUI and why is it needed?

SwiftUI is a modern, declarative framework for building user interfaces across all Apple platforms: iOS, macOS, watchOS, and tvOS. Unlike the traditional UIKit approach (where you manually manage state and update views), SwiftUI allows you to describe what the interface should look like, not how to build it. The framework automatically tracks data changes and redraws only those parts of the interface that have changed.

Why is it needed?

• Less code: The same code works on all Apple platforms.
• Declarative: You describe the interface as a set of simple structures, not as a sequence of commands.
• Automatic state management: @State, @Binding, @ObservableObject — SwiftUI decides when to redraw the interface itself.
• Live preview: In Xcode, you see changes in real time.
• Animations: Adding animations is a single line of code.

SwiftUI is not a library that needs to be installed separately. It is a built-in framework available from iOS 13, macOS 10.15, watchOS 6, and tvOS 13. It comes bundled with Xcode and the Apple SDK.

Installation (Project Setup)

Since SwiftUI is part of the standard Apple SDK, it does not need to be installed via pip, npm, or CocoaPods. All you need is Xcode (version 11 or newer) and a project targeting iOS 13+ / macOS 10.15+.

How to create a new project with SwiftUI:

1. Open Xcode.
2. Select File → New → Project.
3. Choose the "App" template (or "SwiftUI App" in older versions).
4. Make sure "SwiftUI" is selected in the "Interface" field.
5. Click "Next" and create the project.

If you are working with an existing UIKit project, you can add a SwiftUI file (File → New → File → SwiftUI View). SwiftUI and UIKit can coexist in the same project via UIHostingController.

Quick Start with Code Example

Let's create a simple "Click Counter" app. This classic example demonstrates basic SwiftUI concepts: state, buttons, and text.

import SwiftUI

struct ContentView: View {    // @State — a property that stores state and automatically redraws the View when it changes    @State private var count = 0

    var body: some View {        VStack(spacing: 20) {            Text("Counter: \\(count)")                .font(.largeTitle)                .padding()

            HStack(spacing: 20) {                Button("Increase") {                    count += 1                }                .padding()                .background(Color.blue)                .foregroundColor(.white)                .cornerRadius(10)

                Button("Reset") {                    count = 0                }                .padding()                .background(Color.red)                .foregroundColor(.white)                .cornerRadius(10)            }        }    }}

// App entry point@mainstruct MyApp: App {    var body: some Scene {        WindowGroup {            ContentView()        }    }}

Explanation:

• @State — tells SwiftUI to track this property. When count changes, SwiftUI automatically redraws ContentView.
• VStack and HStack — containers for vertical and horizontal arrangement of elements.
• Button — creates a button that executes a closure when pressed.
• Modifiers (.font(), .padding(