SwiftUI View Gallery

Basic Elements

Stuttgart Media University

1 Text

Text("Hello, World!")

Common Modifiers: .font(), .fontWeight(), .foregroundColor(), .lineLimit(), .multilineTextAlignment()

SwiftUI Text

2 Image

Image("pencil")
Image(systemName: "star.fill")

Common Modifiers: .resizable(), .aspectRatio(contentMode:), .scaledToFit(), .scaledToFill(), .clipShape()

Note: SF Symbols (App) can show you all available default images

SwiftUI Image

3 Button

Button("Tap Me") {
    // action
}

Common Modifiers: .buttonStyle(),.padding(), .background(), .foregroundColor(), .cornerRadius(), .tint()

SwiftUI Button 2

4 TextField

@State private var name = ""
TextField("Enter your name", text: $name)

Common Modifiers: .textFieldStyle(), .autocapitalization(), .disableAutocorrection(), .border()

SwiftUI TextField

5 SecureField

@State private var password = ""
SecureField("Password", text: $password)

Same modifiers as TextField

SwiftUI SecureField

6 Toggle

@State private var enabled = false
Toggle("Enable", isOn: $enabled)

Common Modifiers: .toggleStyle(), .tint()

SwiftUI Toggle

7 Picker

@State private var selection = 0
Picker("Pick", selection: $selection) {
    Text("One").tag(0)
    Text("Two").tag(1)
}

Common Modifiers: .pickerStyle()

SwiftUI Picker

8 Stepper

@State private var value = 0
Stepper("Value: \(value)", value: $value)

SwiftUI Stepper

9 Slider

@State private var sliderValue = 0.5
Slider(value: $sliderValue, in: 0...1)

SwiftUI Slider

10 VStack

VStack {
    Text("Top")
    Text("Bottom")
}

Initializer params: alignment, spacing

SwiftUI VStack

11 HStack

HStack {
    Image(systemName: "chevron.left")
    Text("Back")
}

SwiftUI HStack

12 ZStack

ZStack {
    Rectangle().fill(Color.blue)
    Text("Overlaid")
        .foregroundColor(.white)
}

SwiftUI ZStack

13 Spacer

HStack {
    Text("Left")
    Spacer()
    Text("Right")
}

14 NavigationStack / NavigationView

NavigationStack {
    NavigationLink("Detail", destination: Text("Detail View"))
    .navigationTitle("Main")
}

Note: NavigationView appears in older examples; prefer NavigationStack on Xcode 16+.

SwiftUI NavigationStack

15 List

List(items) { item in
    Text(item.name)
}

Common Modifiers: .listStyle()

SwiftUI List

16 ScrollView

ScrollView {
    VStack { ForEach(0..<50) { Text("Item \($0)") } }
}

17 ForEach

ForEach(items, id: \.id) { item in
    Text(item.name)
}

17.1 LazyVStack / LazyHStack

ScrollView {
    LazyVStack {
        ForEach(1...1000, id: \.self) { Text("Row \($0)") }
    }
}

18 Group

Group {
    Text("A")
    Text("B")
}

Used to combine views for containers with view count limits.

19 Color

Color.red

Used as a view to fill backgrounds or shapes.