SwiftUI Basics 📱

import SwiftUI

// Every screen is a struct that conforms to the View protocol.
// The 'body' property describes WHAT to show — SwiftUI builds it.
struct WelcomeView: View {
    var body: some View {
        // A vertical stack places its children top-to-bottom.
        VStack {
            // An SF Symbol icon (Apple ships thousands for free).
            Image(systemName: "swift")
                .font(.system(size: 60))   // make the symbol big
                .foregroundColor(.orange)  // tint it orange

            // A line of text, customised by chaining modifiers.
            Text("Hello, SwiftUI!")
                .font(.largeTitle)         // big title text style
                .bold()                    // make it bold
                .foregroundColor(.blue)    // colour the text blue
        }
        .padding()                         // breathing room around the stack
    }
}

On screen:  a centred column showing a large orange Swift
logo, and directly below it the words "Hello, SwiftUI!" in
big, bold, blue title text — with empty space (padding)
around the whole group.

import SwiftUI

// Three stacks arrange views; you nest them to build any layout:
//   VStack — top to bottom     HStack — left to right
//   ZStack — back to front (layered)
struct ProfileCard: View {
    var body: some View {
        VStack(spacing: 12) {                  // vertical, 12pt between rows
            Image(systemName: "person.circle.fill")
                .font(.system(size: 70))
                .foregroundColor(.blue)

            Text("Alice Johnson")
                .font(.title2)
                .bold()

            // A horizontal row of two labels, side by side.
            HStack(spacing: 30) {              // left to right
                Text("142 Posts")
                Text("1.2k Followers")
            }
            .font(.subheadline)
            .foregroundColor(.gray)

            // ZStack stacks views on top of each other (back to front).
            ZStack {
                Color.blue                     // back layer: a blue rectangle
                Text("iOS Developer")          // front layer: text on top
                    .foregroundColor(.white)
                    .padding(8)
            }
            .cornerRadius(8)
        }
        .padding()
    }
}

On screen:  a centred card. From top to bottom — a blue
person icon, the bold name "Alice Johnson", then a single
row with "142 Posts" and "1.2k Followers" side by side in
small grey text, and finally a rounded blue banner with the
white words "iOS Developer" sitting on top of it.

import SwiftUI

struct GreetingView: View {
    var body: some View {
        // 🎯 YOUR TURN — replace each ___ then preview it in Xcode.

        Text("Good morning!")
            // 1) Make the text use the large-title style
            .font(___)                  // 👉 .largeTitle
            // 2) Colour the text green
            .foregroundColor(___)       // 👉 .green
            // 3) Add space around the text so it isn't cramped
            .___()                      // 👉 padding

        // ✅ Expected on screen:
        //    large green "Good morning!" text with padding around it.
    }
}

import SwiftUI

// @State holds a value that BELONGS to this view. When it changes,
// SwiftUI automatically re-runs body and redraws the screen.
struct CounterView: View {
    @State private var count = 0          // start at 0, owned by the view

    var body: some View {
        VStack(spacing: 20) {
            // \(count) drops the current value into the text.
            Text("Count: \(count)")
                .font(.largeTitle)

            // A Button takes a title and an action closure { ... }.
            Button("Tap me") {
                count += 1                // change state -> view refreshes
            }
            .buttonStyle(.borderedProminent)   // a filled, tappable button
        }
        .padding()
    }
}

On screen:  "Count: 0" in large text with a filled "Tap me"
button under it. Each tap increases the number — tap three
times and the label reads "Count: 3". You never told the
label to update; changing @State did it for you.

import SwiftUI

struct LikeButton: View {
    // 1) Declare a @State Bool that starts as false
    @State private var liked = ___        // 👉 false

    var body: some View {
        VStack(spacing: 16) {
            Image(systemName: liked ? "heart.fill" : "heart")
                .font(.largeTitle)
                .foregroundColor(.red)

            Button("Toggle like") {
                // 2) Flip the value so the heart fills / empties
                liked = ___                // 👉 !liked
            }
        }
        // ✅ Expected on screen: an outline heart that becomes a
        //    filled red heart (and back) each time you tap the button.
    }
}