SwiftUI für Swift: Vollständiger Leitfaden mit Beispielen

Was ist SwiftUI und warum wird es benötigt?

SwiftUI ist ein modernes, deklaratives Framework zur Erstellung von Benutzeroberflächen auf allen Apple-Plattformen: iOS, macOS, watchOS und tvOS. Im Gegensatz zum traditionellen UIKit-Ansatz (bei dem Sie den Zustand und die Aktualisierung von Views manuell verwalten) ermöglicht SwiftUI zu beschreiben, wie die Oberfläche aussehen soll, nicht wie sie erstellt wird. Das Framework verfolgt automatisch Datenänderungen und zeichnet nur die Teile der Oberfläche neu, die sich geändert haben.

Warum wird es benötigt?

\n
• Weniger Code: Derselbe Code funktioniert auf allen Apple-Plattformen.
\n
• Deklarativität: Sie beschreiben die Oberfläche als eine Reihe einfacher Strukturen, nicht als eine Abfolge von Befehlen.
\n
• Automatische Zustandsverwaltung: @State, @Binding, @ObservableObject – SwiftUI entscheidet selbst, wann die Oberfläche neu gezeichnet wird.
\n
• Live-Vorschau: In Xcode sehen Sie Änderungen in Echtzeit.
\n
• Animationen: Das Hinzufügen von Animationen ist eine einzige Codezeile.
\n

SwiftUI ist keine Bibliothek, die separat installiert werden muss. Es ist ein integriertes Framework, das ab iOS 13, macOS 10.15, watchOS 6 und tvOS 13 verfügbar ist. Es wird zusammen mit Xcode und dem Apple SDK ausgeliefert.

Installation (Projektkonfiguration)

Da SwiftUI Teil des standardmäßigen Apple SDK ist, muss es nicht über pip, npm oder CocoaPods installiert werden. Alles, was Sie brauchen, ist Xcode (Version 11 oder neuer) und ein Projekt, das auf iOS 13+ / macOS 10.15+ ausgerichtet ist.

So erstellen Sie ein neues Projekt mit SwiftUI:

\n
1. Öffnen Sie Xcode.
\n
2. Wählen Sie File → New → Project.
\n
3. Wählen Sie die Vorlage "App" (oder "SwiftUI App" in älteren Versionen).
\n
4. Stellen Sie sicher, dass im Feld "Interface" "SwiftUI" ausgewählt ist.
\n
5. Klicken Sie auf "Next" und erstellen Sie das Projekt.
\n

Wenn Sie mit einem bestehenden UIKit-Projekt arbeiten, können Sie eine SwiftUI-Datei hinzufügen (File → New → File → SwiftUI View). SwiftUI und UIKit können in einem Projekt über UIHostingController koexistieren.

Schnellstart mit einem Codebeispiel

Lassen Sie uns eine einfache "Klickzähler"-App erstellen. Dies ist ein klassisches Beispiel, das die grundlegenden Konzepte von SwiftUI zeigt: Zustand, Schaltflächen und Text.

import SwiftUI\n\nstruct ContentView: View {\n    // @State ist eine Eigenschaft, die den Zustand speichert und die View bei Änderung automatisch neu zeichnet\n    @State private var count = 0\n\n    var body: some View {\n        VStack(spacing: 20) {\n            Text("Zähler: \\(count)")\n                .font(.largeTitle)\n                .padding()\n\n            HStack(spacing: 20) {\n                Button("Erhöhen") {\n                    count += 1\n                }\n                .padding()\n                .background(Color.blue)\n                .foregroundColor(.white)\n                .cornerRadius(10)\n\n                Button("Zurücksetzen") {\n                    count = 0\n                }\n                .padding()\n                .background(Color.red)\n                .foregroundColor(.white)\n                .cornerRadius(10)\n            }\n        }\n    }\n}\n\n// Einstiegspunkt der App\n@main\nstruct MyApp: App {\n    var body: some Scene {\n        WindowGroup {\n            ContentView()\n        }\n    }\n}\n

Erklärung:

\n
• @State – teilt SwiftUI mit, dass diese Eigenschaft überwacht werden muss. Bei Änderung von count zeichnet SwiftUI ContentView automatisch neu.
\n
• VStack und HStack sind Container für die vertikale und horizontale Anordnung von Elementen.
\n
• Button – erstellt eine Schaltfläche, die bei Klick einen Closure ausführt.
\n
• Modifikatoren (.font(), .padding(