🐦 Swift

SwiftUI Basics

Lesson 5 of 5 ~6 min

SwiftUI is Apple's declarative framework for building user interfaces. Instead of writing UI code imperatively, you describe what the UI should look like and SwiftUI handles the rest. This is the same framework Archon uses to render its interface.

What is a View?

In SwiftUI, everything you see on screen is a View. A View is a struct that conforms to the View protocol and has a single required property: body.

Editor
Swift
Output

Try it

Change .font(.title) to .font(.largeTitle) and add a .foregroundColor(.blue) modifier to the first Text view.

Layout Containers

SwiftUI uses layout containers to arrange views:

// VStack — vertical stack (top to bottom)
VStack {
  Text("First")
  Text("Second")
}

// HStack — horizontal stack (left to right)
HStack {
  Image(systemName: "star")
  Text("Favorite")
}

// ZStack — overlapping layers (front to back)
ZStack {
  Color.blue
  Text("On top")
}

Modifiers

Modifiers change how a view looks or behaves. They're chained onto views and return a new, modified view.

Text("Styled Text")
  .font(.headline)           // Change font
  .foregroundColor(.white)    // Text color
  .padding()                  // Add padding
  .background(Color.blue)    // Background color
  .cornerRadius(10)           // Rounded corners
  .shadow(radius: 5)          // Drop shadow

// Common modifiers:
// .font(), .foregroundColor(), .padding()
// .background(), .cornerRadius(), .frame()
// .opacity(), .offset(), .rotationEffect()

Quiz

What property does every SwiftUI View need?
Challenge

Create a VStack with 3 Text views and different font sizes using the .font() modifier.