📚LearnHub

Course Lessons

Lesson 2 of 4

SwiftUI Basics

Learn SwiftUI's declarative syntax for building user interfaces, including views, modifiers, state management, and layout systems.

35 minutes

SwiftUI Basics

SwiftUI is Apple's modern framework for building user interfaces declaratively across all Apple platforms.

What is SwiftUI?

  • Declarative: Describe what your UI should look like, not how to build it
  • Reactive: UI automatically updates when data changes
  • Cross-Platform: Same code works on iOS, macOS, watchOS, and tvOS
  • Live Preview: See changes instantly in Xcode without building

Basic Views

SwiftUI provides built-in views for common UI elements:

  • Text: Display text content
  • Image: Show images from assets or SF Symbols
  • Button: Interactive tap targets
  • TextField: User text input
  • Toggle: Boolean switches
  • List: Scrollable rows of content

View Modifiers

Modifiers customize the appearance and behavior of views:

Text("Hello, SwiftUI!")
    .font(.title)
    .foregroundColor(.blue)
    .padding()
  • Chain modifiers to build up styling
  • Order matters - modifiers apply in sequence
  • Common modifiers: font, padding, background, cornerRadius

Layout System

SwiftUI uses container views for layout:

  • VStack: Vertical stack of views
  • HStack: Horizontal stack of views
  • ZStack: Overlapping views (depth)
  • Spacer: Flexible space between views

State Management

SwiftUI manages UI state reactively:

  • @State: Local mutable state within a view
  • @Binding: Two-way connection to state
  • @ObservedObject: External observable state
  • @EnvironmentObject: Shared state across views

Building Your First View

Every SwiftUI view conforms to the View protocol:

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

Best Practices

  • Break complex views into smaller, reusable components
  • Use @State for simple local state
  • Leverage property wrappers for reactive updates
  • Preview your views with different configurations

Code Example

import SwiftUI

// Basic View Structure
struct WelcomeView: View {
    @State private var userName = ""
    @State private var isLoggedIn = false
    
    var body: some View {
        VStack(spacing: 20) {
            // Header
            Text("Welcome to MyApp")
                .font(.largeTitle)
                .fontWeight(.bold)
            
            // User Input
            TextField("Enter your name", text: $userName)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding(.horizontal)
            
            // Button with State
            Button(action: {
                isLoggedIn.toggle()
            }) {
                Text(isLoggedIn ? "Logged In" : "Login")
                    .foregroundColor(.white)
                    .padding()
                    .frame(maxWidth: .infinity)
                    .background(isLoggedIn ? Color.green : Color.blue)
                    .cornerRadius(10)
            }
            .padding(.horizontal)
            
            // Conditional Content
            if isLoggedIn {
                Text("Hello, \(userName)!")
                    .font(.headline)
                    .foregroundColor(.green)
            }
            
            Spacer()
        }
        .padding()
    }
}

// List Example
struct ItemListView: View {
    let items = ["iPhone", "iPad", "MacBook", "Apple Watch"]
    
    var body: some View {
        List(items, id: \.self) { item in
            HStack {
                Image(systemName: "star.fill")
                    .foregroundColor(.yellow)
                Text(item)
            }
        }
    }
}

// Preview
struct WelcomeView_Previews: PreviewProvider {
    static var previews: some View {
        WelcomeView()
    }
}
Previous LessonNext Lesson