Previews als Werkzeug

Das Problem: Eine View, viele Situationen

Eine View sieht nicht immer gleich aus. Dieselbe Profilkarte muss funktionieren:

• im hellen und im dunklen Modus,
• mit normaler und mit sehr großer Schrift, denn viele Menschen stellen auf ihrem iPhone größere Schrift ein,
• auf einem kleinen und einem großen iPhone,
• mit einem kurzen Namen wie „Li“ und einem langen wie „Maximiliane Hohenzollern-Sigmaringen“.

Alle diese Fälle jedes Mal im Simulator durchzuspielen, dauert ewig. Und deshalb wird es meist nicht gemacht, bis ein Nutzer sich beschwert.

Mit Previews siehst du alle Varianten gleichzeitig, live, während du tippst.

Die einfachste Preview

Aus Lektion 0.3 kennst du schon:

#Preview {
    ContentView()
}

#Preview ist ein Makro. Das erkennst du am #. Ein Makro ist Code, der beim Übersetzen weiteren Code erzeugt. Du musst nicht wissen, was es genau erzeugt. Wichtig ist: Alles in den geschweiften Klammern wird im Canvas angezeigt.

Previews werden nur in Xcode verwendet. In der fertigen App auf dem iPhone spielen sie keine Rolle.

Mehrere Previews

Du darfst so viele #Preview-Blöcke schreiben, wie du willst. Gib ihnen Namen, damit du sie im Canvas unterscheiden kannst:

struct GreetingView: View {
    let name: String

    var body: some View {
        Text("Hallo, \(name)!")
            .font(.largeTitle)
            .padding()
            .background(.yellow.opacity(0.3))
    }
}

#Preview("Kurzer Name") {
    GreetingView(name: "Li")
}

#Preview("Langer Name") {
    GreetingView(name: "Maximiliane Hohenzollern-Sigmaringen")
}

Im Canvas erscheinen oben Reiter für jede Preview. Ein Klick wechselt zwischen ihnen.

Dark Mode und große Schrift

Für die häufigsten Varianten gibt es eingebaute Modifier:

#Preview("Dunkel") {
    GreetingView(name: "Anna")
        .preferredColorScheme(.dark)
}

#Preview("Große Schrift") {
    GreetingView(name: "Anna")
        .dynamicTypeSize(.accessibility3)
}

• .preferredColorScheme(.dark) zeigt die View im dunklen Modus.
• .dynamicTypeSize(...) simuliert eine andere Schriftgröße. Die Werte reichen von .xSmall bis .accessibility5. Die accessibility-Stufen sind sehr groß und werden von Menschen mit eingeschränkter Sehkraft genutzt.

Geräte und Ausrichtung

Welches Gerät der Canvas zeigt, wählst du unten im Canvas über die Geräteauswahl. Für Querformat oder ein kompaktes Layout gibt es Traits:

#Preview("Querformat", traits: .landscapeLeft) {
    GreetingView(name: "Anna")
}

#Preview("Nur die View", traits: .sizeThatFitsLayout) {
    GreetingView(name: "Anna")
}

.sizeThatFitsLayout zeigt nur die View selbst, ohne iPhone-Rahmen drumherum. Das ist praktisch für kleine Bausteine wie Buttons oder Zeilen.

Previews mit Beispieldaten

Sobald Views eigene Daten bekommen, brauchst du in der Preview passende Beispiele. Ein bewährtes Muster kennst du aus Lektion 1.16:

struct Book {
    let title: String
    let author: String
    let pages: Int
}

extension Book {
    static let example = Book(title: "Momo", author: "Michael Ende", pages: 304)
    static let longTitle = Book(
        title: "Die unendliche Geschichte von Bastian Balthasar Bux",
        author: "Michael Ende",
        pages: 480
    )
}

struct BookRow: View {
    let book: Book

    var body: some View {
        VStack(alignment: .leading) {
            Text(book.title)
                .font(.headline)
            Text("\(book.author) · \(book.pages) Seiten")
                .foregroundStyle(.secondary)
        }
    }
}

#Preview("Normal") {
    BookRow(book: .example)
}

#Preview("Langer Titel") {
    BookRow(book: .longTitle)
}

Die Beispieldaten stehen an einer Stelle und sind überall wiederverwendbar. In Projekt C und allen weiteren Projekten arbeiten wir genau so.

Previews mit Zustand: @Previewable

Manche Views brauchen nicht nur Daten, sondern einen veränderbaren Wert, mit dem man in der Preview interagieren kann. Das betrifft vor allem Views mit @Binding (Lektion 2.10). Dafür gibt es @Previewable:

#Preview {
    @Previewable @State var isOn = true
    Toggle("WLAN", isOn: $isOn)
        .padding()
}

Im interaktiven Canvas kannst du den Schalter dann wirklich umlegen. Was @State und $ bedeuten, lernst du in den Lektionen 2.9 und 2.10. Merk dir das Muster für später.

Die Modi des Canvas

Unten im Canvas findest du einige Schaltflächen. Die wichtigsten:

Außerdem kannst du mit dem Pin-Symbol eine Preview anheften. Dann bleibt sie sichtbar, auch wenn du im Editor zu einer anderen Datei wechselst. Sehr praktisch, wenn du eine kleine Komponente bearbeitest und gleichzeitig sehen willst, wie sie im großen Bildschirm wirkt.

Wenn die Preview streikt

Previews sind großartig, aber manchmal empfindlich. Die häufigsten Probleme:

• „Preview paused“: Xcode wartet. Klick auf den Aktualisieren-Pfeil oder drück ⌥ ⌘ P.
• Fehlermeldung im Canvas: Meist gibt es einen Fehler im Code. Behebe zuerst alle roten Fehler im Editor.
• „Cannot preview in this file“: Oft hilft Editor → Canvas zweimal (aus und an) oder ein Neustart von Xcode.
• Absturz in der Preview: Klick auf Diagnostics. Dort steht, welche Zeile abgestürzt ist, oft ein ! oder ein Index außerhalb eines Arrays.

Typische Fehler

Preview zeigt eine leere Fläche

Die View hat keine Größe, etwa ein leeres VStack oder ein Text mit leerem String. Füg Beispieldaten hinzu oder prüf, ob deine Bedingungen vielleicht alles ausblenden.

Argument fehlt

#Preview {
    BookRow()
}

Die View braucht Daten. Übergib zum Beispiel BookRow(book: .example).

@State ohne @Previewable

#Preview {
    @State var isOn = true
    Toggle("WLAN", isOn: $isOn)
}

Variablen mit Property Wrappern brauchen in Previews das Präfix @Previewable.

FAQ

Übungen

struct PriceTag: View {
    let price: String

    var body: some View {
        Text(price)
            .font(.title)
            .padding()
            .background(.yellow)
    }
}

#Preview("Normal") {
    PriceTag(price: "19,99 €")
}

#Preview("Dunkel") {
    PriceTag(price: "19,99 €")
        .preferredColorScheme(.dark)
}

#Preview("Riesig") {
    PriceTag(price: "19,99 €")
        .dynamicTypeSize(.accessibility5)
}

#Preview {
    @Previewable @State var count = 0

    VStack(spacing: 20) {
        Text("\(count)")
            .font(.largeTitle)
        Button("Plus eins") {
            count += 1
        }
    }
}

Zusammenfassung

• #Preview zeigt Views live im Canvas, nur in Xcode.
• Mehrere benannte Previews zeigen verschiedene Situationen.
• .preferredColorScheme(.dark) und .dynamicTypeSize(...) prüfen Dark Mode und große Schrift.
• Traits wie .landscapeLeft und .sizeThatFitsLayout ändern Ausrichtung und Rahmen.
• Beispieldaten in einer Extension (static let example) sind überall wiederverwendbar.
• @Previewable @State ermöglicht interaktive Previews.
• Previews ersetzen nicht den Test im Simulator.

Spickzettel

#Preview("Name") { MyView() }
#Preview("Dunkel") { MyView().preferredColorScheme(.dark) }
#Preview("Groß") { MyView().dynamicTypeSize(.accessibility3) }
#Preview(traits: .landscapeLeft) { MyView() }
#Preview(traits: .sizeThatFitsLayout) { MyRow() }
#Preview {
    @Previewable @State var on = true
    Toggle("An", isOn: $on)
}