SwiftUI Cheat Sheet: Views, State & Navigation (iOS 18)

@State (local, private)
    ↓ passed down as
@Binding (two-way reference to parent state)

@Observable class (shared across view tree)
    ↓ injected via
@Environment (read anywhere below injection point)

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

    var body: some View {
        Button("Count: \(count)") {
            count += 1
        }
    }
}

struct ToggleView: View {
    @Binding var isOn: Bool   // receives reference from parent

    var body: some View {
        Toggle("Enable", isOn: $isOn)
    }
}

// Parent passes binding with $
ToggleView(isOn: $featureEnabled)

import Observation

@Observable
class UserStore {
    var name = "Alice"
    var isLoggedIn = false
}

struct ProfileView: View {
    var store: UserStore     // no property wrapper needed

    var body: some View {
        Text(store.name)
        Button("Logout") { store.isLoggedIn = false }
    }
}

// At app or scene root
ContentView()
    .environment(UserStore())

// Anywhere in the view tree
struct SettingsView: View {
    @Environment(UserStore.self) var store

    var body: some View {
        Text("Hello, \(store.name)")
    }
}

struct SettingsView: View {
    @AppStorage("darkMode") var darkMode = false

    var body: some View {
        Toggle("Dark Mode", isOn: $darkMode)
    }
}

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List(items) { item in
                NavigationLink(item.title, value: item)
            }
            .navigationTitle("Items")
            .navigationDestination(for: Item.self) { item in
                ItemDetailView(item: item)
            }
        }
    }
}

@State private var path = NavigationPath()

NavigationStack(path: $path) {
    ContentView()
        .navigationDestination(for: Item.self) { item in
            DetailView(item: item)
        }
}

// Navigate programmatically:
path.append(selectedItem)

// Go back to root:
path.removeLast(path.count)

TabView {
    HomeView()
        .tabItem { Label("Home", systemImage: "house") }

    SearchView()
        .tabItem { Label("Search", systemImage: "magnifyingglass") }

    ProfileView()
        .tabItem { Label("Profile", systemImage: "person") }
}

@State private var showSheet = false

Button("Open") { showSheet = true }
    .sheet(isPresented: $showSheet) {
        SheetContentView()
            .presentationDetents([.medium, .large])   // Bottom sheet heights
    }

// Full screen:
.fullScreenCover(isPresented: $showFullScreen) {
    FullScreenView()
}

List(fruits, id: \.self) { fruit in
    Text(fruit)
}

// Section headers
List {
    Section("Favorites") {
        ForEach(favorites) { item in
            ItemRow(item: item)
        }
    }
}

List(items) { item in
    ItemRow(item: item)
        .swipeActions(edge: .trailing) {
            Button(role: .destructive) {
                delete(item)
            } label: {
                Label("Delete", systemImage: "trash")
            }
        }
        .swipeActions(edge: .leading) {
            Button { pin(item) } label: {
                Label("Pin", systemImage: "pin")
            }
            .tint(.yellow)
        }
}

import SwiftData

@Model
class Task {
    var title: String
    var isDone: Bool
    init(title: String) {
        self.title = title
        self.isDone = false
    }
}

struct TaskListView: View {
    @Query(sort: \Task.title) var tasks: [Task]
    @Environment(\.modelContext) var context

    var body: some View {
        List(tasks) { task in
            Text(task.title)
        }
        Button("Add Task") {
            context.insert(Task(title: "New Task"))
        }
    }
}

@State private var expanded = false

RoundedRectangle(cornerRadius: 12)
    .frame(height: expanded ? 200 : 80)
    .animation(.spring(duration: 0.4), value: expanded)
    .onTapGesture { expanded.toggle() }

Button("Animate") {
    withAnimation(.easeInOut(duration: 0.3)) {
        isVisible.toggle()
        scale = isVisible ? 1.0 : 0.5
    }
}

if isVisible {
    CardView()
        .transition(.asymmetric(
            insertion: .slide,
            removal: .opacity
        ))
}

// Use if/else inside ViewBuilder
VStack {
    if isLoading {
        ProgressView()
    } else {
        ContentView()
    }
}

.safeAreaInset(edge: .bottom) {
    ComposerBar()   // Floats above tab bar / keyboard
}

.scrollDismissesKeyboard(.interactively)

.task {
    await viewModel.loadData()
}

// With ID — re-runs when ID changes:
.task(id: selectedTab) {
    await viewModel.reload(for: selectedTab)
}