swiftui-patterns

SwiftUI Patterns

Moderne SwiftUI-Muster zur Erstellung deklarativer, leistungsstarker Benutzeroberflächen auf Apple-Plattformen. Behandelt das Observation-Framework, View-Komposition, typsichere Navigation und Leistungsoptimierung.

Wann aktivieren

• Erstellen von SwiftUI-Views und Verwalten von Status (@State, @Observable, @Binding)
• Entwerfen von Navigationsflüssen mit NavigationStack
• Strukturieren von View-Modellen und Datenfluss
• Optimieren der Rendering-Leistung für Listen und komplexe Layouts
• Arbeiten mit Umgebungswerten und Dependency Injection in SwiftUI

Statusverwaltung

Property-Wrapper-Auswahl

Wählen Sie den einfachsten Wrapper, der passt:

Wrapper	Verwendungszweck
@State	View-lokale Werttypen (Toggles, Formularfelder, Sheet-Präsentation)
@Binding	Zwei-Wege-Referenz auf @State der Eltern-View
@Observable-Klasse + @State	Eigenes Modell mit mehreren Eigenschaften
@Observable-Klasse (kein Wrapper)	Schreibgeschützte Referenz, die von der Eltern-View übergeben wird
@Bindable	Zwei-Wege-Bindung an eine @Observable-Eigenschaft
@Environment	Geteilte Abhängigkeiten, die via .environment() injiziert werden

@Observable ViewModel

Verwenden Sie @Observable (nicht ObservableObject) – es verfolgt änderungen auf Eigenschaftsebene, sodass SwiftUI nur die Views neu rendert, die die geänderte Eigenschaft lesen:

@Observable
final class ItemListViewModel {
    private(set) var items: [Item] = []
    private(set) var isLoading = false
    var searchText = ""

    private let repository: any ItemRepository

    init(repository: any ItemRepository = DefaultItemRepository()) {
        self.repository = repository
    }

    func load() async {
        isLoading = true
        defer { isLoading = false }
        items = (try? await repository.fetchAll()) ?? []
    }
}

View, die das ViewModel verwendet

struct ItemListView: View {
    @State private var viewModel: ItemListViewModel

    init(viewModel: ItemListViewModel = ItemListViewModel()) {
        _viewModel = State(initialValue: viewModel)
    }

    var body: some View {
        List(viewModel.items) { item in
            ItemRow(item: item)
        }
        .searchable(text: $viewModel.searchText)
        .overlay { if viewModel.isLoading { ProgressView() } }
        .task { await viewModel.load() }
    }
}

Environment Injection

Ersetzen Sie @EnvironmentObject durch @Environment:

// Injizieren
ContentView()
    .environment(authManager)

// Verwenden
struct ProfileView: View {
    @Environment(AuthManager.self) private var auth

    var body: some View {
        Text(auth.currentUser?.name ?? "Gast")
    }
}

View-Komposition

Subviews extrahieren, um Ungültigkeitserklärungen zu begrenzen

Zerteilen Sie Views in kleine, fokussierte Strukturen. Wenn sich der Status ändert, wird nur die Subview neu gerendert, die diesen Status liest:

struct OrderView: View {
    @State private var viewModel = OrderViewModel()

    var body: some View {
        VStack {
            OrderHeader(title: viewModel.title)
            OrderItemList(items: viewModel.items)
            OrderTotal(total: viewModel.total)
        }
    }
}

ViewModifier für wiederverwendbare Stile

struct CardModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(.regularMaterial)
            .clipShape(RoundedRectangle(cornerRadius: 12))
    }
}

extension View {
    func cardStyle() -> some View {
        modifier(CardModifier())
    }
}

Navigation

Typsicherer NavigationStack

Verwenden Sie NavigationStack mit NavigationPath für programmatisches, typsicheres Routing:

@Observable
final class Router {
    var path = NavigationPath()

    func navigate(to destination: Destination) {
        path.append(destination)
    }

    func popToRoot() {
        path = NavigationPath()
    }
}

enum Destination: Hashable {
    case detail(Item.ID)
    case settings
    case profile(User.ID)
}

struct RootView: View {
    @State private var router = Router()

    var body: some View {
        NavigationStack(path: $router.path) {
            HomeView()
                .navigationDestination(for: Destination.self) { dest in
                    switch dest {
                    case .detail(let id): ItemDetailView(itemID: id)
                    case .settings: SettingsView()
                    case .profile(let id): ProfileView(userID: id)
                    }
                }
        }
        .environment(router)
    }
}

Leistung

Lazy-Container für große Sammlungen verwenden

LazyVStack und LazyHStack erstellen Views nur, wenn sie sichtbar sind:

ScrollView {
    LazyVStack(spacing: 8) {
        ForEach(items) { item in
            ItemRow(item: item)
        }
    }
}

Stabile Identifikatoren

Verwenden Sie immer stabile, eindeutige IDs in ForEach – vermeiden Sie Array-Indizes:

// Identifiable-Konformität oder explizites id verwenden
ForEach(items, id: \.stableID) { item in
    ItemRow(item: item)
}

Teure Arbeit in body vermeiden

• Führen Sie niemals I/O, Netzwerkaufrufe oder schwere Berechnungen innerhalb von body durch
• Verwenden Sie .task {} für asynchrone Arbeit – es bricht automatisch ab, wenn die View verschwindet
• Verwenden Sie .sensoryFeedback() und .geometryGroup() sparsam in Scroll-Views
• Minimieren Sie .shadow(), .blur() und .mask() in Listen – sie lösen Offscreen-Rendering aus

Equatable-Konformität

Für Views mit teuren Bodies implementieren Sie Equatable, um unnötige Neuberechnungen zu überspringen:

struct ExpensiveChartView: View, Equatable {
    let dataPoints: [DataPoint] // DataPoint muss Equatable konform sein

    static func == (lhs: Self, rhs: Self) -> Bool {
        lhs.dataPoints == rhs.dataPoints
    }

    var body: some View {
        // Komplexes Diagramm-Rendering
    }
}

Vorschauen

Verwenden Sie das #Preview-Makro mit eingebauten Mock-Daten für schnelle Iteration:

#Preview("Leerer Zustand") {
    ItemListView(viewModel: ItemListViewModel(repository: EmptyMockRepository()))
}

#Preview("Geladen") {
    ItemListView(viewModel: ItemListViewModel(repository: PopulatedMockRepository()))
}

Anti-Patterns, die vermieden werden sollten

• Verwenden von ObservableObject / @Published / @StateObject / @EnvironmentObject in neuem Code – migrieren Sie zu @Observable
• Platzieren von asynchroner Arbeit direkt in body oder init – verwenden Sie .task {} oder explizite Lademethoden
• Erstellen von View-Modellen als @State innerhalb von Child-Views, die die Daten nicht besitzen – übergeben Sie diese stattdessen von der Eltern-View
• Verwenden von AnyView-Typauslöschung – bevorzugen Sie @ViewBuilder oder Group für bedingte Views
• Ignorieren von Sendable-Anforderungen beim Übergeben von Daten an/von Actors

Referenzen

Siehe Skill: swift-actor-persistence für Actor-basierte Persistenzmuster. Siehe Skill: swift-protocol-di-testing für protokollbasiertes Dependency Injection und Testen mit Swift Testing.