What is SwiftUI?
SwiftUI is Apple's declarative UI framework. Instead of telling the system how to build every button and label step by step, you describe what you want and SwiftUI figures out the rest. Less code, fewer bugs, and your interface updates automatically when data changes.
import SwiftUI
struct ContentView: View {
var body: some View {
Text("Hello, World!")
.font(.largeTitle)
.foregroundColor(.blue)
}
}Declarative UI
In UIKit, you'd create a label, set its text, set its font, set its color, and position it manually. In SwiftUI, you just say what you want. The code reads like a description of the interface, not instructions for building it.
struct GreetingView: View {
let name: String
var body: some View {
VStack {
Text("Hello,")
Text(name)
.fontWeight(.bold)
.foregroundColor(.purple)
}
.font(.title)
}
}SwiftUI vs UIKit
UIKit is imperative — you tell it exactly what to do. SwiftUI is declarative — you say what you want. SwiftUI has live previews, less boilerplate, and builds for all Apple platforms. UIKit has more mature APIs and fine-grained control. Most new projects use SwiftUI, but UIKit knowledge still helps.
// UIKit way
let label = UILabel()
label.text = "Hello"
label.font = UIFont.systemFont(ofSize: 24)
label.textColor = .systemBlue
label.textAlignment = .center
// SwiftUI way
Text("Hello")
.font(.title)
.foregroundColor(.blue)
.multilineTextAlignment(.center)Xcode Preview Canvas
One of SwiftUI's killer features is the live preview. Write some code and see it render instantly in Xcode — no building, no running on a simulator. Edit your code and the preview updates in real time.
struct Preview: PreviewProvider {
static var previews: some View {
ContentView()
GreetingView(name: "Swift")
}
}The body Property
Every SwiftUI view has a body property that returns some View. This is where your UI lives. The some View return type means "I return a view, but I'm not telling you which one." SwiftUI optimizes this behind the scenes.
struct CardView: View {
var body: some View {
VStack(alignment: .leading, spacing: 10) {
Text("SwiftUI Basics")
.font(.headline)
Text("Learn to build beautiful UIs with Swift.")
.font(.subheadline)
.foregroundColor(.secondary)
}
.padding()
.background(Color(.systemBackground))
.cornerRadius(12)
.shadow(radius: 4)
}
}Building a Simple App
Every SwiftUI app starts with an App struct. It defines the scene — typically a window group. Inside, you point to your first view. That view's body property is where everything begins.
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
struct ContentView: View {
@State private var message = "Tap the button!"
var body: some View {
VStack(spacing: 20) {
Text(message)
.font(.title2)
Button("Change Message") {
message = "You tapped it!"
}
.buttonStyle(.borderedProminent)
}
.padding()
}
}