SwiftUI in mobiele ontwikkeling: wat het is, kernconcepten en hoe het werkt

Basis (View Protocol, body, some View, @ViewBuilder)

View Protocol is het centrale protocol van SwiftUI. Het vereist slechts één eigenschap: var body: some View. body is een berekende eigenschap die de UI-beschrijving retourneert. SwiftUI roept body aan bij elke statuswijziging en rendert het resultaat op de GPU.

@ViewBuilder

@ViewBuilder is een Result Builder voor Views. Maakt het mogelijk om meerdere Views in een closure te schrijven zonder return en zonder TupleView. Ondersteunt if/else, switch, ForEach. Alle containers (VStack, HStack, ZStack, Group) gebruiken @ViewBuilder. Een alternatief is Group { … } voor groepering zonder lay-out. some View is een Opaque Type. De compiler kent het concrete View-type (Text, Button, VStack, enz.), maar retourneert het extern als some View. Dit maakt het mogelijk om het body-type te wijzigen zonder de handtekening te veranderen. ViewModifier — View-modifier: .font(), .padding(), .background(). Aangepaste modifier via ViewModifier protocol en .modifier().

// Voorbeeld van View met @ViewBuilder en NavigationStack
struct ContentView: View {
    @State private var items = ["Item 1", "Item 2"]

    var body: some View {
        NavigationStack {
            List(items, id: .self) { item in
                NavigationLink(item) {
                    DetailView(item: item)
                }
            }
            .navigationTitle("Items")
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Add") {
                        items.append("New Item")
                    }
                }
            }
        }
    }
}

// DetailView met @StateObject
struct DetailView: View {
    let item: String
    @StateObject private var viewModel = DetailViewModel()

    var body: some View {
        Text(item)
            .task {
                await viewModel.loadDetails(for: item)
            }
    }
}

Modifiers en containers (ViewModifier, NavigationStack, List, Form)

NavigationStack (iOS 16+) — datagestuurde navigatie. Neemt een pad (array van hashbare waarden) en toont de bestemming via navigationDestination. Vervangt NavigationLink met bestemmingsweergaven. NavigationLink — knop om door de stack te navigeren. List — verticale lijst met secties, swipes, verwijderen en slepen. Form — een gespecialiseerde List voor instellingen: secties, kiezers, schakelaars, tekstvelden. Section — groepering in List/Form met kop- en voettekst. ViewModifier — aangepaste modifiers voor het hergebruiken van stijlen. .modifier(CustomModifier()) — toepassing.

List en Form in detail

List in SwiftUI is het equivalent van UITableView. Ondersteunt .onDelete, .onMove, .refreshable. SwipeActions — .swipeActions { Button("Verwijder", role: .destructive) { } }. Form — geoptimaliseerd voor instellingen: DatePicker, Toggle, Stepper, Picker. Section met header/footer — voor groepering. OutlineGroup — hiërarchische lijsten (equivalent van UITableView met secties). DisclosureGroup — inklapbare sectie met inhoud. IT Sectr beveelt List aan voor gegevens en Form voor instellingen.

PreviewProvider — protocol voor voorbeelden in Xcode Canvas. Canvas — interactief SwiftUI-voorbeeld (vereist @main en Swift 5.9+). @ScaledMetric — aanpasbare grootte die schaalt met Dynamic Type.

Statusbeheer (@StateObject, @ObservedObject, @EnvironmentObject, @FocusState)

Property Wrappers vormen de basis van statusbeheer in SwiftUI. @State — lokale status (waardetype). @Binding — verbinding met bovenliggende status. @StateObject — maakt een ObservableObject aan. SwiftUI beheert de levenscyclus van het object. @ObservedObject — observeert een extern ObservableObject. @EnvironmentObject — object uit de omgeving (afhankelijkheidsinjectie via .environmentObject()). @Environment — systeemwaarden (.colorScheme, .locale). @AppStorage — UserDefaults. @FetchRequest — Core Data-query. @FocusState — invoerfocus.

@StateObject vs @ObservedObject: @StateObject maakt een object aan, @ObservedObject observeert het. Gebruik @StateObject voor het eerste model in de hiërarchie, @ObservedObject voor doorgeven aan onderliggende weergaven. @FocusState — focusbeheer: .focused($field, equals: .email). Ondersteunt enum voor meerdere velden.

Omgevingswaarden en DI

@Environment — systeemwaarden: colorScheme, locale, sizeCategory, layoutDirection, managedObjectContext. Aangepaste omgevingswaarden — aangepaste waarde via EnvironmentKey. Gebruikt voor afhankelijkheidsinjectie: services doorgeven zonder expliciete parameters. .environment()-modifier — stelt een waarde in in de hiërarchie. @EnvironmentObject — ObservableObject van .environmentObject(). Verschilt van @Environment doordat het een referentietype doorgeeft. IT Sectr beveelt @Environment aan voor systeemwaarden en @EnvironmentObject voor services.

Levenscyclus (.task, .onAppear, .onDisappear)

.task{} — asynchrone bewerking bij verschijnen van de weergave. Automatische annulering bij verdwijnen. Vervangt .onAppear voor async/await. .onAppear{} — synchrone bewerking bij verschijnen. .onDisappear{} — bewerking bij verdwijnen. .onChange(of:) — reactie op waardeveranderingen. .onReceive(Publisher) — reactie op Combine-publisher. Levenscyclus van View in SwiftUI: init → onAppear → body (rendering) → onDisappear. Bij statuswijziging: body → diff → opnieuw renderen. IT Sectr beveelt .task aan voor asynchroon laden en .onAppear voor analytics.

Animatie in SwiftUI

.animation() — animatiemodifier. .transition() — verschijn/verdwijnaimatie. withAnimation — expliciete statuswijzigingsanimatie. matchedGeometryEffect — animatie tussen verschillende weergaven (hero-animatie). PhaseAnimator (iOS 17+) — meerfasige animatie op basis van enum. KeyframeAnimator (iOS 17+) — framevoor-frame-animatie met keyframes. SwiftUI-animaties worden op de GPU uitgevoerd via Core Animation. IT Sectr beveelt .spring() aan voor natuurlijke animaties en .interpolatingSpring voor fysieke effecten.

Gegevensstroom (Bindings, @Published, ObservableObject)

ObservableObject — protocol voor objecten met @Published-eigenschappen. SwiftUI abonneert zich op de objectWillChange-publisher. @Published — publiceert eigenschapswijzigingen. @StateObject — maakt ObservableObject, beheert levenscyclus. @ObservedObject — observeert extern. Combine — framework voor reactief programmeren. @EnvironmentObject — DI via omgeving. .environmentObject() stelt in, @EnvironmentObject leest. MVVM — standaardarchitectuur: View (SwiftUI) — ViewModel (ObservableObject) — Model. IT Sectr beveelt MVVM + @StateObject aan voor hoofd-ViewModels.

class UserViewModel: ObservableObject {
    @Published var users: [User] = []
    @Published var isLoading = false

    func loadUsers() async {
        isLoading = true
        defer { isLoading = false }
        do {
            users = try await api.fetchUsers()
        } catch {
            print("Fout: \(error)")
        }
    }
}

struct UsersView: View {
    @StateObject private var viewModel = UserViewModel()

    var body: some View {
        List(viewModel.users, id: \.id) { user in
            Text(user.name)
        }
        .task { await viewModel.loadUsers() }
        .overlay {
            if viewModel.isLoading { ProgressView() }
        }
    }
}

Toegankelijkheid en lokalisatie

Toegankelijkheid in SwiftUI: .accessibilityLabel(), .accessibilityHint(), .accessibilityValue(), .accessibilityAddTraits(). VoiceOver leest toegankelijkheidslabels. Dynamic Type — @ScaledMetric, @DynamicProperty. Lokalisatie: String(localized:) (SwiftUI + String Catalog). LocalizedStringKey — automatische vertaling. Meervoudsregels — via String Catalog (one, few, many, other). Rechts-naar-links (Arabisch, Hebreeuws) — automatisch ondersteund. .environment(.layoutDirection, .rightToLeft). IT Sectr beveelt toegankelijkheidslabels aan voor alle interactieve elementen.

struct AccessibleButton: View {
    let action: () -> Void

    var body: some View {
        Button(action: action) {
            Label("Settings", systemImage: "gear")
        }
        .accessibilityLabel("Open Settings")
        .accessibilityHint("Double tap to navigate to settings screen")
        .accessibilityAddTraits(.isButton)
    }
}

// Dynamic Type-ondersteuning
struct ScalableText: View {
    @ScaledMetric private var fontSize: CGFloat = 17

    var body: some View {
        Text("Hello, World!")
            .font(.system(size: fontSize))
    }
}

Grafieken en visualisatie (Swift Charts)

Swift Charts (iOS 16+) — framework voor het bouwen van grafieken. Chart { } — basiscontainer. BarMark, LineMark, PointMark, AreaMark, RuleMark — markeringen. ForEach voor gegevens. ChartAxis — asaanpassing. .chartXAxis, .chartYAxis. ChartLegend — legenda. Interpolatie — catmullRom, linear, step. Animatie — .animation() voor Chart. IT Sectr beveelt Swift Charts aan voor ingebouwde grafieken en Charts (DGCharts) voor complexe.

import Charts

struct MonthlySales: Identifiable {
    let id = UUID()
    let month: String
    let sales: Double
}

struct SalesChart: View {
    let data: [MonthlySales]

    var body: some View {
        Chart(data) { item in
            BarMark(
                x: .value("Month", item.month),
                y: .value("Sales", item.sales)
            )
            .foregroundStyle(.blue.gradient)
        }
        .chartXAxisLabel("Month")
        .chartYAxisLabel("Sales")
        .frame(height: 200)
        .padding()
    }
}

Swift Package Manager (SPM) — Apple's afhankelijkheidsbeheerder. Geïntegreerd in Xcode. Ondersteunt: binaire pakketten, bronnen, tests, swift-6 strikte concurrentie. Pakketpublicatie via GitHub met semver-tag. SPM is de de facto standaard voor Swift-afhankelijkheden en vervangt CocoaPods en Carthage. IT Sectr beveelt SPM aan voor alle nieuwe projecten.

Swift Concurrency (async/await, TaskGroup, AsyncSequence) — async/await ingebouwd in Swift 5.5+. Task — eenheid van asynchroniteit. TaskGroup — parallelle taken. AsyncSequence — asynchrone reeks (AsyncStream, AsyncAlgorithms). Task Local Values — contextuele gegevens voor Task. Swift Concurrency vervangt Combine volledig voor asynchrone bewerkingen.