SwiftUI a mobilfejlesztésben: mi ez, alapfogalmak és működés

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

View Protocol a SwiftUI központi protokollja. Csak egy tulajdonságot igényel: var body: some View. A body egy számított tulajdonság, amely visszaadja a UI leírását. A SwiftUI minden állapotváltozáskor meghívja a body-t, és a GPU-n rendereli az eredményt.

@ViewBuilder

@ViewBuilder egy Result Builder a View-okhoz. Lehetővé teszi több View írását egy closure-ben return és TupleView nélkül. Támogatja az if/else, switch, ForEach elemeket. Minden konténer (VStack, HStack, ZStack, Group) @ViewBuilder-t használ. Alternatíva a Group { … } csoportosításhoz elrendezés nélkül. some View egy Opaque Type. A fordító ismeri a konkrét View típust (Text, Button, VStack, stb.), de kívülről some View-ként adja vissza. Ez lehetővé teszi a body típusának megváltoztatását az aláírás módosítása nélkül. ViewModifier — View módosító: .font(), .padding(), .background(). Egyéni módosító a ViewModifier protokollon és .modifier()-en keresztül.

// Példa View @ViewBuilder és NavigationStack használatával
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 @StateObject használatával
struct DetailView: View {
    let item: String
    @StateObject private var viewModel = DetailViewModel()

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

Módosítók és konténerek (ViewModifier, NavigationStack, List, Form)

NavigationStack (iOS 16+) — adatvezérelt navigáció. Egy útvonalat (hashable értékek tömbje) vesz át, és a navigationDestination-en keresztül jeleníti meg a célt. Felváltja a NavigationLink-et célnézetekkel. NavigationLink — gomb a veremben való navigáláshoz. List — függőleges lista szekciókkal, húzásokkal, törléssel és fogd és vidd funkcióval. Form — egy speciális List a beállításokhoz: szekciók, választók, kapcsolók, szövegmezők. Section — csoportosítás List/Form-ban fejléccel és lábléccel. ViewModifier — egyéni módosítók stílusok újrafelhasználásához. .modifier(CustomModifier()) — alkalmazás.

List és Form részletesen

List SwiftUI-ban a UITableView megfelelője. Támogatja a .onDelete, .onMove, .refreshable elemeket. SwipeActions — .swipeActions { Button("Törlés", role: .destructive) { } }. Form — optimalizálva a beállításokhoz: DatePicker, Toggle, Stepper, Picker. Section header/footer-rel — csoportosításhoz. OutlineGroup — hierarchikus listák (UITableView megfelelője szekciókkal). DisclosureGroup — összecsukható szekció tartalommal. Az IT Sectr a List-et ajánlja adatokhoz és a Form-ot beállításokhoz.

PreviewProvider — protokoll előnézetekhez az Xcode Canvas-ban. Canvas — interaktív SwiftUI előnézet (@main és Swift 5.9+ szükséges). @ScaledMetric — alkalmazkodó méret, amely a Dynamic Type-tal skálázódik.

Állapotkezelés (@StateObject, @ObservedObject, @EnvironmentObject, @FocusState)

Property Wrappers az állapotkezelés alapját képezik a SwiftUI-ban. @State — helyi állapot (értéktípus). @Binding — kapcsolat a szülő állapotához. @StateObject — ObservableObject-et hoz létre. A SwiftUI kezeli az objektum életciklusát. @ObservedObject — egy külső ObservableObject-et figyel meg. @EnvironmentObject — objektum a környezetből (függőséginjektálás .environmentObject()-en keresztül). @Environment — rendszerértékek (.colorScheme, .locale). @AppStorage — UserDefaults. @FetchRequest — Core Data lekérdezés. @FocusState — beviteli fókusz.

@StateObject vs @ObservedObject: A @StateObject létrehoz egy objektumot, a @ObservedObject megfigyeli azt. Használja a @StateObject-et az első modell létrehozásához a hierarchiában, a @ObservedObject-et a gyermek nézeteknek való átadáshoz. @FocusState — fókuszkezelés: .focused($field, equals: .email). Támogatja az enum-ot több mezőhöz.

Környezeti értékek és DI

@Environment — rendszerértékek: colorScheme, locale, sizeCategory, layoutDirection, managedObjectContext. Egyéni környezeti értékek — egyéni érték az EnvironmentKey-en keresztül. Függőséginjektáláshoz használatos: szolgáltatások átadása explicit paraméterek nélkül. .environment() módosító — értéket állít be a hierarchiában. @EnvironmentObject — ObservableObject a .environmentObject()-ből. Eltér a @Environment-től, mert referenciatípust ad át. Az IT Sectr a @Environment-t ajánlja rendszerértékekhez és a @EnvironmentObject-et szolgáltatásokhoz.

Életciklus (.task, .onAppear, .onDisappear)

.task{} — aszinkron művelet a nézet megjelenésekor. Automatikus törlés eltűnéskor. Felváltja a .onAppear-t az async/await számára. .onAppear{} — szinkron művelet megjelenéskor. .onDisappear{} — művelet eltűnéskor. .onChange(of:) — reakció értékváltozásokra. .onReceive(Publisher) — reakció a Combine publisher-re. A View életciklusa SwiftUI-ban: init → onAppear → body (renderelés) → onDisappear. Állapotváltozáskor: body → diff → újrarenderelés. Az IT Sectr a .task-t ajánlja aszinkron betöltéshez és a .onAppear-t analitikához.

Animáció SwiftUI-ban

.animation() — animációs módosító. .transition() — megjelenés/eltűnés animáció. withAnimation — explicit állapotváltozás animáció. matchedGeometryEffect — animáció különböző nézetek között (hős animáció). PhaseAnimator (iOS 17+) — többfázisú animáció enum alapján. KeyframeAnimator (iOS 17+) — képkockánkénti animáció kulcskockákkal. A SwiftUI animációk a GPU-n futnak a Core Animation-en keresztül. Az IT Sectr a .spring()-t ajánlja természetes animációkhoz és az .interpolatingSpring-et fizikai hatásokhoz.

Adatfolyam (Bindings, @Published, ObservableObject)

ObservableObject — protokoll @Published tulajdonságokkal rendelkező objektumokhoz. A SwiftUI feliratkozik az objectWillChange publisher-re. @Published — közzéteszi a tulajdonságváltozásokat. @StateObject — létrehozza az ObservableObject-et, kezeli az életciklust. @ObservedObject — külső megfigyelése. Combine — keretrendszer reaktív programozáshoz. @EnvironmentObject — DI környezeten keresztül. .environmentObject() beállítja, @EnvironmentObject olvassa. MVVM — standard architektúra: View (SwiftUI) — ViewModel (ObservableObject) — Model. Az IT Sectr az MVVM + @StateObject-t ajánlja a fő ViewModel-ekhez.

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("Hiba: \(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() }
        }
    }
}

Akadálymentesítés és lokalizáció

Akadálymentesítés a SwiftUI-ban: .accessibilityLabel(), .accessibilityHint(), .accessibilityValue(), .accessibilityAddTraits(). A VoiceOver felolvassa az akadálymentesítési címkéket. Dynamic Type — @ScaledMetric, @DynamicProperty. Lokalizáció: String(localized:) (SwiftUI + String Catalog). LocalizedStringKey — automatikus fordítás. Többesszám szabályok — a String Catalog-on keresztül (one, few, many, other). Jobbról balra (arab, héber) — automatikusan támogatott. .environment(.layoutDirection, .rightToLeft). Az IT Sectr akadálymentesítési címkéket ajánl minden interaktív elemhez.

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 támogatás
struct ScalableText: View {
    @ScaledMetric private var fontSize: CGFloat = 17

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

Diagramok és vizualizáció (Swift Charts)

Swift Charts (iOS 16+) — keretrendszer diagramok építéséhez. Chart { } — alap konténer. BarMark, LineMark, PointMark, AreaMark, RuleMark — jelek. ForEach az adatokhoz. ChartAxis — tengelyek testreszabása. .chartXAxis, .chartYAxis. ChartLegend — jelmagyarázat. Interpoláció — catmullRom, linear, step. Animáció — .animation() a Chart-hoz. Az IT Sectr a Swift Charts-t ajánlja beépített diagramokhoz és a Charts (DGCharts) keretrendszert összetett diagramokhoz.

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) — az Apple függőségkezelője. Integrálva az Xcode-ba. Támogatja: bináris csomagok, erőforrások, tesztek, swift-6 szigorú konkurencia. Csomagok közzététele GitHub-on keresztül semver címkével. Az SPM a de facto szabvány a Swift függőségekhez, felváltva a CocoaPods-ot és a Carthage-t. Az IT Sectr az SPM-et ajánlja minden új projekthez.

Swift Concurrency (async/await, TaskGroup, AsyncSequence) — async/await beépítve a Swift 5.5+-ba. Task — aszinkronitás egysége. TaskGroup — párhuzamos feladatok. AsyncSequence — aszinkron sorozat (AsyncStream, AsyncAlgorithms). Task Local Values — kontextuális adatok a Task számára. A Swift Concurrency teljesen felváltja a Combine-t az aszinkron műveletekhez.