SwiftUI inom mobilutveckling: vad det är, nyckelbegrepp och hur det fungerar

Grundläggande (View Protocol, body, some View, @ViewBuilder)

View Protocol är det centrala protokollet i SwiftUI. Det kräver bara en egenskap: var body: some View. body är en beräknad egenskap som returnerar UI-beskrivningen. SwiftUI anropar body vid varje tillståndsändring och renderar resultatet på GPU:n.

@ViewBuilder

@ViewBuilder är en Result Builder för Views. Tillåter att skriva flera Views i en closure utan return och utan TupleView. Stöder if/else, switch, ForEach. Alla containrar (VStack, HStack, ZStack, Group) använder @ViewBuilder. Ett alternativ är Group { … } för gruppering utan layout. some View är en Opaque Type. Kompilatorn känner den konkreta View-typen (Text, Button, VStack, etc.), men returnerar den externt som some View. Detta gör det möjligt att ändra body-typen utan att ändra signaturen. ViewModifier — View-modifierare: .font(), .padding(), .background(). Anpassad modifierare via ViewModifier-protokollet och .modifier().

// Exempel på View med @ViewBuilder och 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 med @StateObject
struct DetailView: View {
    let item: String
    @StateObject private var viewModel = DetailViewModel()

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

Modifierare och containrar (ViewModifier, NavigationStack, List, Form)

NavigationStack (iOS 16+) — datadriven navigering. Tar en sökväg (matris med hashbara värden) och visar destinationen via navigationDestination. Ersätter NavigationLink med destinationsvyer. NavigationLink — knapp för navigering i stacken. List — vertikal lista med sektioner, svep, borttagning och dra och släpp. Form — en specialiserad List för inställningar: sektioner, väljare, växlar, textfält. Section — gruppering i List/Form med rubrik och sidfot. ViewModifier — anpassade modifierare för återanvändning av stilar. .modifier(CustomModifier()) — tillämpning.

List och Form i detalj

List i SwiftUI är motsvarigheten till UITableView. Stöder .onDelete, .onMove, .refreshable. SwipeActions — .swipeActions { Button("Ta bort", role: .destructive) { } }. Form — optimerad för inställningar: DatePicker, Toggle, Stepper, Picker. Section med header/footer — för gruppering. OutlineGroup — hierarkiska listor (motsvarighet till UITableView med sektioner). DisclosureGroup — hopfällbar sektion med innehåll. IT Sectr rekommenderar List för data och Form för inställningar.

PreviewProvider — protokoll för förhandsvisningar i Xcode Canvas. Canvas — interaktiv SwiftUI-förhandsvisning (kräver @main och Swift 5.9+). @ScaledMetric — anpassningsbar storlek som skalas med Dynamic Type.

Tillståndshantering (@StateObject, @ObservedObject, @EnvironmentObject, @FocusState)

Property Wrappers är grunden för tillståndshantering i SwiftUI. @State — lokalt tillstånd (värdetyp). @Binding — anslutning till föräldratillstånd. @StateObject — skapar ett ObservableObject. SwiftUI hanterar objektets livscykel. @ObservedObject — observerar ett externt ObservableObject. @EnvironmentObject — objekt från miljön (beroendeinjektion via .environmentObject()). @Environment — systemvärden (.colorScheme, .locale). @AppStorage — UserDefaults. @FetchRequest — Core Data-fråga. @FocusState — inmatningsfokus.

@StateObject vs @ObservedObject: @StateObject skapar ett objekt, @ObservedObject observerar det. Använd @StateObject för första modelgenerering i hierarkin, @ObservedObject för att skicka till underordnade vyer. @FocusState — fokushantering: .focused($field, equals: .email). Stöder enum för flera fält.

Miljövärden och DI

@Environment — systemvärden: colorScheme, locale, sizeCategory, layoutDirection, managedObjectContext. Anpassade miljövärden — anpassat värde via EnvironmentKey. Används för beroendeinjektion: överföring av tjänster utan explicita parametrar. .environment()-modifierare — anger ett värde i hierarkin. @EnvironmentObject — ObservableObject från .environmentObject(). Skiljer sig från @Environment genom att den överför en referenstyp. IT Sectr rekommenderar @Environment för systemvärden och @EnvironmentObject för tjänster.

Livscykel (.task, .onAppear, .onDisappear)

.task{} — asynkron operation när vyn visas. Automatisk annullering när den försvinner. Ersätter .onAppear för async/await. .onAppear{} — synkron operation när den visas. .onDisappear{} — operation när den försvinner. .onChange(of:) — reaktion på värdeförändringar. .onReceive(Publisher) — reaktion på Combine-publisher. Vylivscykel i SwiftUI: init → onAppear → body (renderering) → onDisappear. Vid tillståndsändring: body → diff → omrendering. IT Sectr rekommenderar .task för asynkron laddning och .onAppear för analys.

Animation i SwiftUI

.animation() — animationsmodifierare. .transition() — visnings/försvinnandeanimation. withAnimation — explicit tillståndsändringsanimation. matchedGeometryEffect — animation mellan olika vyer (hjälteanimation). PhaseAnimator (iOS 17+) — flerfasanimation baserad på enum. KeyframeAnimator (iOS 17+) — bild-för-bild-animation med nyckelbildrutor. SwiftUI-animationer körs på GPU:n via Core Animation. IT Sectr rekommenderar .spring() för naturliga animationer och .interpolatingSpring för fysikaliska effekter.

Dataflöde (Bindings, @Published, ObservableObject)

ObservableObject — protokoll för objekt med @Published-egenskaper. SwiftUI prenumererar på objectWillChange-publishern. @Published — publicerar egenskapsändringar. @StateObject — skapar ObservableObject, hanterar livscykel. @ObservedObject — observerar externt. Combine — ramverk för reaktiv programmering. @EnvironmentObject — DI via miljön. .environmentObject() anger, @EnvironmentObject läser. MVVM — standardarkitektur: View (SwiftUI) — ViewModel (ObservableObject) — Model. IT Sectr rekommenderar MVVM + @StateObject för huvud-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("Fel: \(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() }
        }
    }
}

Tillgänglighet och lokalisering

Tillgänglighet i SwiftUI: .accessibilityLabel(), .accessibilityHint(), .accessibilityValue(), .accessibilityAddTraits(). VoiceOver läser tillgänglighetsetiketter. Dynamic Type — @ScaledMetric, @DynamicProperty. Lokalisering: String(localized:) (SwiftUI + String Catalog). LocalizedStringKey — automatisk översättning. Pluralregler — via String Catalog (one, few, many, other). Höger-till-vänster (arabiska, hebreiska) — automatiskt stöd. .environment(.layoutDirection, .rightToLeft). IT Sectr rekommenderar tillgänglighetsetiketter för alla interaktiva element.

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-stöd
struct ScalableText: View {
    @ScaledMetric private var fontSize: CGFloat = 17

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

Diagram och visualisering (Swift Charts)

Swift Charts (iOS 16+) — ramverk för att bygga diagram. Chart { } — grundcontainer. BarMark, LineMark, PointMark, AreaMark, RuleMark — markeringar. ForEach för data. ChartAxis — axelanpassning. .chartXAxis, .chartYAxis. ChartLegend — teckenförklaring. Interpolation — catmullRom, linear, step. Animation — .animation() för Chart. IT Sectr rekommenderar Swift Charts för inbyggda diagram och Charts (DGCharts) för komplexa.

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) — Apples beroendehanterare. Integrerad i Xcode. Stöder: binära paket, resurser, tester, swift-6 strikt samtidighet. Paketpublicering via GitHub med semver-tagg. SPM är de facto-standard för Swift-beroenden och ersätter CocoaPods och Carthage. IT Sectr rekommenderar SPM för alla nya projekt.

Swift Concurrency (async/await, TaskGroup, AsyncSequence) — async/await inbyggt i Swift 5.5+. Task — enhet för asynkronicitet. TaskGroup — parallella uppgifter. AsyncSequence — asynkron sekvens (AsyncStream, AsyncAlgorithms). Task Local Values — kontextuella data för Task. Swift Concurrency ersätter Combine helt för asynkrona operationer.