Swift SwiftUI Basics Cheat Sheet

Covers SwiftUI View structs, layout stacks, state management with @State and @Binding, and common modifiers for building declarative UIs.

2 PagesBeginnerApr 10, 2026

A Basic View

Every SwiftUI screen is a struct conforming to View.

swift

import SwiftUIstruct ContentView: View {    var body: some View {        Text("Hello, SwiftUI!")            .font(.title)            .foregroundColor(.blue)            .padding()    }}#Preview {    ContentView()}

Layout Stacks

VStack, HStack, and ZStack arrange child views.

swift

struct ProfileView: View {    var body: some View {        VStack(spacing: 12) {          // vertical stack            HStack {                    // horizontal stack                Image(systemName: "person.circle")                Text("Ana")                Spacer()                 // pushes content apart            }            ZStack {                    // overlapping stack                Circle().fill(Color.gray)                Text("A")            }            .frame(width: 50, height: 50)        }        .padding()    }}

@State and @Binding

Local mutable state and two-way references passed to child views.

swift

struct CounterView: View {    @State private var count = 0 // local, mutable view state    var body: some View {        VStack {            Text("Count: \(count)")            Button("Increment") {                count += 1 // mutating @State triggers a re-render            }            ChildToggle(isOn: .constant(count > 0))        }    }}struct ChildToggle: View {    @Binding var isOn: Bool // two-way reference to a parent's @State    var body: some View {        Toggle("Enabled", isOn: $isOn)    }}

State Property Wrappers

SwiftUI's tools for owning and observing state.

@State- Source of truth for simple, view-local mutable state; SwiftUI owns storage
@Binding- A two-way reference to state owned by a parent view, passed with $
@ObservedObject- Subscribes to an external reference type conforming to ObservableObject
@StateObject- Like @ObservedObject, but the view owns and creates the instance's lifecycle
@EnvironmentObject- Injects a shared ObservableObject from the view hierarchy's environment
@Environment- Reads a value from SwiftUI's environment, e.g. \.colorScheme or \.dismiss

Lists & Modifiers

Displaying dynamic data and styling views with chained modifiers.

swift

struct Item: Identifiable {    let id = UUID()    let name: String}struct ItemListView: View {    let items = [Item(name: "Apple"), Item(name: "Banana")]    var body: some View {        NavigationStack {            List(items) { item in                Text(item.name)            }            .navigationTitle("Groceries")        }    }}// Common modifiers, chained left-to-right (order matters):Text("Styled")    .padding()    .background(Color.yellow)    .cornerRadius(8)    .shadow(radius: 2)

Pro Tip

Modifier order matters — `.padding().background(.yellow)` pads first then colors the padded area, while `.background(.yellow).padding()` colors only the original content and adds transparent padding around it. Always read modifier chains top-to-bottom as the actual render order.

Was this cheat sheet helpful?

Swift Optionals Cheat Sheet

Swift Protocols Cheat Sheet

Explore Topics

#SwiftSwiftUIBasics#SwiftSwiftUIBasicsCheatSheet#Programming#Beginner#ABasicView#LayoutStacks#StateAndBinding#StatePropertyWrappers#DataStructures#CheatSheet#SkillVeris

Sri Hayavadhana Info-Tech

Professional Web Designing Services