Picker, Slider, Stepper, DatePicker

Das Problem: Tippen ist nicht immer die beste Eingabe

Eine Kaffeebestellung: Größe, Milchsorte, Anzahl, Abholzeit. Mit Textfeldern wäre das mühsam und fehleranfällig. Wer weiß schon, ob er „Hafer“, „Hafermilch“ oder „hafer“ tippen soll?

Für Auswahlen aus festen Möglichkeiten, Zahlen in einem Bereich und Zeitpunkte gibt es eigene Bedienelemente. Sie sind schneller, verhindern ungültige Eingaben und fühlen sich vertraut an, weil sie überall in iOS verwendet werden.

Picker: Eine aus mehreren

struct CoffeeView: View {
    @State private var size = "M"

    var body: some View {
        VStack(spacing: 20) {
            Picker("Größe", selection: $size) {
                Text("Klein").tag("S")
                Text("Mittel").tag("M")
                Text("Groß").tag("L")
            }

            Text("Gewählt: \(size)")
        }
    }
}

So funktioniert ein Picker:

• selection: $size ist ein Binding auf den gewählten Wert (Lektion 2.10).
• Jede Option ist eine View, hier ein Text.
• .tag(...) verbindet die Option mit einem Wert. Wählt der Nutzer „Mittel“, wird size auf "M" gesetzt.

Picker mit Enums

Mit Strings als Tags droht wieder das Tippfehler-Problem aus Lektion 1.14. Besser ist ein Enum:

enum CoffeeSize: String, CaseIterable, Identifiable {
    case small = "Klein"
    case medium = "Mittel"
    case large = "Groß"

    var id: Self { self }
}

struct CoffeeView: View {
    @State private var size = CoffeeSize.medium

    var body: some View {
        Picker("Größe", selection: $size) {
            ForEach(CoffeeSize.allCases) { size in
                Text(size.rawValue)
            }
        }
    }
}

Hier kommt alles aus Stufe 1 zusammen:

• String als Raw Value liefert den Anzeigetext.
• CaseIterable liefert mit allCases alle Optionen.
• Identifiable mit var id: Self { self } macht jeden Fall eindeutig erkennbar, damit ForEach die Optionen auseinanderhalten kann (Lektion 1.15).

Und das Schöne: Bei ForEach über die Fälle eines Enums setzt SwiftUI die Tags automatisch. Kommt eine neue Größe dazu, erscheint sie ohne weitere Änderung im Picker.

ForEach schauen wir uns in Lektion 2.15 genau an. Für jetzt reicht: Es erzeugt für jedes Element eine View.

Picker-Stile

Derselbe Picker kann ganz unterschiedlich aussehen:

Picker("Größe", selection: $size) { ... }
    .pickerStyle(.segmented)

Slider: Werte stufenlos wählen

@State private var volume = 0.5

Slider(value: $volume)

Ohne weitere Angaben geht der Wert von 0 bis 1. Meist willst du einen eigenen Bereich, Schritte und Beschriftungen:

@State private var temperature = 21.0

VStack {
    Slider(value: $temperature, in: 15...28, step: 0.5) {
        Text("Temperatur")
    } minimumValueLabel: {
        Image(systemName: "snowflake")
    } maximumValueLabel: {
        Image(systemName: "flame")
    }

    Text("\(temperature, format: .number) °C")
}

• in: 15...28 legt den Bereich fest, mit einem Range aus Lektion 1.4.
• step: 0.5 lässt den Regler in halben Schritten einrasten.
• Die Labels links und rechts zeigen die Enden des Bereichs.

Stepper: In kleinen Schritten zählen

@State private var cups = 1

Stepper("Tassen: \(cups)", value: $cups, in: 1...10)

Zwei kleine Knöpfe „−“ und „+“. Mit in: legst du Minimum und Maximum fest, mit step: die Schrittweite. Am Rand werden die Knöpfe automatisch deaktiviert.

DatePicker: Datum und Uhrzeit

@State private var pickupTime = Date.now

DatePicker("Abholung", selection: $pickupTime)

Das zeigt Datum und Uhrzeit als kompakte Knöpfe. Ein Tipp darauf öffnet einen Kalender bzw. ein Zeitrad.

Nur Datum oder nur Uhrzeit:

DatePicker("Geburtstag", selection: $birthday, displayedComponents: .date)
DatePicker("Wecker", selection: $alarm, displayedComponents: .hourAndMinute)

Einen erlaubten Bereich festlegen:

DatePicker(
    "Termin",
    selection: $appointment,
    in: Date.now...,
    displayedComponents: [.date, .hourAndMinute]
)

Date.now... ist ein offener Bereich: ab jetzt, ohne Ende. Termine in der Vergangenheit sind damit nicht wählbar. Mit ...Date.now wären nur vergangene Daten erlaubt, gut für ein Geburtsdatum.

Und verschiedene Stile:

DatePicker("Datum", selection: $date, displayedComponents: .date)
    .datePickerStyle(.graphical)

.graphical zeigt direkt einen ganzen Kalender, .wheel die klassischen Drehräder, .compact (Standard) die platzsparenden Knöpfe.

ColorPicker: Farben wählen

@State private var favoriteColor = Color.blue

ColorPicker("Lieblingsfarbe", selection: $favoriteColor)

Ein Tipp auf den Farbkreis öffnet Apples Farbauswahl mit Raster, Spektrum und Reglern.

Alles zusammen

Eine kleine Kaffeebestellung. Die Elemente funktionieren auch außerhalb eines Formulars, in einem Form (nächste Lektion) sehen sie aber noch aufgeräumter aus:

enum Milk: String, CaseIterable, Identifiable {
    case cow = "Kuhmilch"
    case oat = "Hafer"
    case soy = "Soja"
    case none = "Ohne"

    var id: Self { self }
}

struct OrderView: View {
    @State private var size = CoffeeSize.medium
    @State private var milk = Milk.oat
    @State private var cups = 1
    @State private var sweetness = 0.0
    @State private var pickup = Date.now

    var body: some View {
        VStack(alignment: .leading, spacing: 20) {
            Picker("Größe", selection: $size) {
                ForEach(CoffeeSize.allCases) { size in
                    Text(size.rawValue)
                }
            }
            .pickerStyle(.segmented)

            Picker("Milch", selection: $milk) {
                ForEach(Milk.allCases) { milk in
                    Text(milk.rawValue)
                }
            }

            Stepper("Anzahl: \(cups)", value: $cups, in: 1...10)

            VStack(alignment: .leading) {
                Text("Süße")
                Slider(value: $sweetness, in: 0...3, step: 1)
            }

            DatePicker("Abholung", selection: $pickup, in: Date.now..., displayedComponents: .hourAndMinute)

            Text("\(cups) × \(size.rawValue) mit \(milk.rawValue)")
                .font(.headline)
        }
        .padding()
    }
}

Typische Fehler

Auswahl ändert sich nicht

Fast immer passen die Typen von Tag und Auswahl nicht zusammen. Häufiger Fall: Die Auswahl ist ein Optional CoffeeSize?, die Tags sind aber CoffeeSize. Dann braucht jedes Tag ebenfalls ein Optional: .tag(Optional(size)). Einfacher: Mach die Auswahl nicht optional.

Slider mit Int

Slider braucht einen Fließkommawert. Verwende Double.

Datum wird nicht angezeigt wie erwartet

DatePicker und Text(date, ...) verwenden die Zeitzone und das Format des Geräts. In der Preview entspricht das deinem Mac. Willst du ein anderes Format testen, ändere die Umgebung (Lektion 2.5, 🔴-FAQ).

Picker ohne Beschriftung

Der Titel im Picker("Größe", ...) wird je nach Stil nicht angezeigt, etwa bei .segmented. Lass ihn trotzdem drin: VoiceOver liest ihn vor. Brauchst du ihn auch optisch, schreib einen eigenen Text darüber.

FAQ

Übungen

enum TimeRange: String, CaseIterable, Identifiable {
    case day = "Tag"
    case week = "Woche"
    case month = "Monat"

    var id: Self { self }
}

struct RangeView: View {
    @State private var range = TimeRange.week

    var body: some View {
        VStack(spacing: 20) {
            Picker("Zeitraum", selection: $range) {
                ForEach(TimeRange.allCases) { range in
                    Text(range.rawValue)
                }
            }
            .pickerStyle(.segmented)

            Text("Ansicht: \(range.rawValue)")
        }
        .padding()
    }
}

struct BMIView: View {
    @State private var height = 175.0
    @State private var weight = 70

    var bmi: Double {
        let meters = height / 100
        return Double(weight) / (meters * meters)
    }

    var body: some View {
        VStack(alignment: .leading, spacing: 20) {
            Text("Größe: \(Int(height)) cm")
            Slider(value: $height, in: 140...210, step: 1)

            Stepper("Gewicht: \(weight) kg", value: $weight, in: 40...200)

            Text("BMI: \(bmi, format: .number.precision(.fractionLength(1)))")
                .font(.largeTitle)
                .bold()
        }
        .padding()
    }
}

Zusammenfassung

• Picker wählt einen Wert aus mehreren. Am besten mit einem Enum, das CaseIterable und Identifiable erfüllt.
• Stile: .menu, .segmented, .wheel, .inline, .navigationLink.
• Slider für stufenlose Werte mit in: und step:, Stepper für genaue, kleine Zahlen.
• DatePicker mit displayedComponents und Bereichen wie Date.now....
• ColorPicker für Farben.
• Tags und Auswahl müssen denselben Typ haben.

Spickzettel

enum Size: String, CaseIterable, Identifiable {
    case s = "Klein", m = "Mittel"
    var id: Self { self }
}

Picker("Größe", selection: $size) {
    ForEach(Size.allCases) { Text($0.rawValue) }
}
.pickerStyle(.segmented)

Slider(value: $volume, in: 0...10, step: 1)
Stepper("Anzahl: \(n)", value: $n, in: 1...10)
DatePicker("Termin", selection: $date, in: Date.now..., displayedComponents: .date)
ColorPicker("Farbe", selection: $color)