SwiftUI — kulcsfogalmak, View, State és Data Flow

Mi az a SwiftUI?

SwiftUI — az Apple deklaratív UI keretrendszere, amely radikálisan különbözik a UIKit-től. Ahelyett, hogy kontrollereket, nézeteket hozna létre és kézzel kezelné azok életciklusát, a fejlesztő deklarációk formájában írja le a felületet: minek kell a képernyőn lennie, nem pedig hogyan kell felépíteni. A SwiftUI a reaktivitás elvén alapul: a felület az állapot függvénye. Az állapot (State) változásakor a SwiftUI automatikusan újraszámolja az összes függő View body-ját, és csak a képernyő megváltozott részeit frissíti. A SwiftUI iOS 13+, iPadOS 13+, macOS 10.15+, watchOS 6+, tvOS 13+ és visionOS 1+ rendszereken érhető el. A SwiftUI kód platformfüggetlen: egy fájl minimális platformadaptációkkal működik iPhone, iPad, Mac és Apple Watch készülékeken. Az Apple WWDC Session 101 (2024) szerint a SwiftUI az App Store szabványos UI-mintáinak több mint 90%-át lefedi.

SwiftUI vs UIKit

UIKit — imperatív keretrendszer (2008): a fejlesztő létrehozza a UIViewController-t, konfigurálja a subviews-t a viewDidLoad-ban, implementálja a delegate/datasource-t a UITableView-hez, és frissíti a képernyőt reloadData vagy setNeedsLayout segítségével. A SwiftUI a kontrollereket egyszerű View struktúrákkal, a delegátumokat binding és onChange, az Auto Layout-ot HStack/VStack/ZStack és módosítókkal (padding, frame, offset) helyettesíti. A UIKit kézi memóriakezelést igényel ARC-en keresztül; a SwiftUI — olyan struktúrák, amelyek nem igényelnek referenciaszámlálást. A SwiftUI teljesítménye összehasonlítható a UIKit-kel: a keretrendszer diffing algoritmust használ a minimális változtatáskészlethez. Az IT Sectr-ben a SwiftUI-t iOS 17+ célú új projektekhez használják; az iOS 14–15 támogatású projektek a SwiftUI korlátozott kompatibilitása miatt UIKit-et igényelnek.

A SwiftUI deklaratív szintaxisa

A SwiftUI-ban a felület a ViewBuilderen keresztül írható le — egy result builder, amely a View-készletet tuple-vé vagy Group-pá alakítja. A módosítók (.padding(), .font(), .foregroundColor()) új View-kat hoznak létre módosított beállításokkal, nem mutálják az eredeti objektumot. Minden módosító új View-t ad vissza, lehetővé téve a láncolást. A ViewBuilder támogatja az if/else, switch, ForEach szerkezeteket — feltételes és ciklikus megjelenítést külön kontrollerek nélkül. A View a SwiftUI-ban value type (struct), ami kiszámítható viselkedést garantál és kiküszöböli a versenyhelyzeteket (race conditions).

A View protokoll és a computed property body

View — protokoll egyetlen követelménnyel: some View típusú computed property body. Minden, a View-nak megfelelő struktúra leírja a képernyő saját részét a body-ban. A some View típus — opaque return type, amely elrejti a visszaadott View konkrét típusát (VStack, HStack, ZStack, Text, Image stb. összeállítása). A Swift fordító a konkrét típust fordítási időben következteti ki, megőrizve a közvetlen hívás teljesítményét típus törlés nélkül.

import SwiftUI

struct GreetingView: View {
    var name: String
    
    var body: some View {
        VStack(spacing: 12) {
            Text("Szia, \(name)!")
                .font(.largeTitle)
                .foregroundColor(.primary)
            
            Text("Üdvözöljük a SwiftUI-ban")
                .font(.body)
                .foregroundColor(.secondary)
        }
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 12)
                .fill(.ultraThinMaterial)
        )
    }
}

A GreetingView struktúra fogadja a name paramétert, és két szövegblokkot jelenít meg egy függőleges stack-ben. A .font, .foregroundColor, .padding és .background módosítók konfigurálják a megjelenést. A SwiftUI minden alkalommal meghívja a body-t, amikor a bemeneti paraméterek (name) változnak — az újrarajzolás csak a megváltozott részekre történik. A példában RoundedRectangle .ultraThinMaterial anyaggal van használva — natív blur háttér, amely a SwiftUI-ba van építve.

@State: helyi állapot a SwiftUI-ban

@State — property wrapper, amely egy View-hoz tartozó helyi állapotot deklarál. A SwiftUI automatikusan kezeli a State memóriáját: az érték változásakor a body újrarajzolódik, de csak azoknál a View-knál, amelyek ezt a State-et használják. A State az igazság forrása (source of truth) egyszerű típusokhoz (String, Int, Bool, enum). Ne használja a @State-et összetett adatmodellekhez — azokhoz a @StateObject és @ObservedObject valók. A State-nek private-nak kell lennie, és magában a View-ban kell tárolni, nem szabad átadni komponensek között.

import SwiftUI

struct CounterView: View {
    @State private var count = 0
    
    var body: some View {
        VStack(spacing: 20) {
            Text("Szám: \(count)")
                .font(.system(size: 48, weight: .bold))
            
            Button(action: { count += 1 }) {
                Label("Növelés", systemImage: "plus.circle")
            }
            .buttonStyle(.borderedProminent)
        }
        .padding()
    }
}

Kezdeti érték count = 0. A gomb minden megnyomása növeli a count-ot; a SwiftUI automatikusan újrarajzolja a CounterView-t teljesen (az összes View-t). A UIKit-ben egy hasonló forgatókönyvhöz IBOutlet, IBAction és a label.text kézi frissítése kellett volna. A @State garantálja, hogy a View csak egy adott State változásakor rajzolódik újra — a SwiftUI diffing algoritmusa megtalálja a minimális változtatásokat a fában.

@Binding: kétirányú kommunikáció a View-k között

@Binding — property wrapper, amely kétirányú kapcsolatot hoz létre a View és az általa nem birtokolt adatok között. A Binding egy hivatkozás a State-re (vagy más igazság forrásra), amely lehetővé teszi a gyermek View számára a szülőben tárolt érték olvasását és módosítását. A Binding a $ előtaggal jelölhető: a $count Binding<Int>-t ad át a gyermek View-nak. Binding nélkül a gyermek View nem tudja módosítani a szülő adatait — csak olvasni tudja azokat.

import SwiftUI

struct StepperControl: View {
    @Binding var value: Int
    let range: ClosedRange<Int>
    
    var body: some View {
        HStack {
            Button(action: { if value > range.lowerBound { value -= 1 } }) {
                Image(systemName: "minus.circle")
            }
            Text("\(value)")
                .frame(minWidth: 40)
            Button(action: { if value < range.upperBound { value += 1 } }) {
                Image(systemName: "plus.circle")
            }
        }
    }
}

struct ParentView: View {
    @State private var quantity = 5
    
    var body: some View {
        StepperControl(value: $quantity, range: 1...10)
    }
}

A ParentView birtokolja a State quantity-t, és Binding-et ad át a $quantity-n keresztül. A StepperControl módosíthatja a value-t, és a quantity a szülőben automatikusan szinkronizálódik. A Binding nem adatmásolat, hanem híd az igazság forrásához. Használja a @Binding-et egyedi vezérlőkhöz, szerkesztőkhöz és újrafelhasználható komponensekhez, amelyeknek módosítaniuk kell a szülő adatait.

@ObservedObject és @StateObject: külső adatmodellek

@StateObject — property wrapper az ObservableObject-nak megfelelő osztálypéldány létrehozására és birtoklására. A View egyszer hozza létre az objektumot az életciklusa során, és újrarajzolódik a @Published tulajdonságainak változásakor. @ObservedObject — hasonló wrapper, de a View nem birtokolja az objektumot — az objektum a View-n kívül jön létre és tárolódik (az inicializátoron keresztül adódik át). Az Apple a @StateObject-t ajánlja az igazság forrásának a View hierarchiában, és a @ObservedObject-t a függőséginjektáláshoz.

import SwiftUI
import Combine

class UserSettings: ObservableObject {
    @Published var username: String = "Guest"
    @Published var isLoggedIn = false
}

struct ProfileView: View {
    @StateObject private var settings = UserSettings()
    
    var body: some View {
        VStack {
            TextField("Username", text: $settings.username)
                .textFieldStyle(.roundedBorder)
            
            Toggle("Logged In", isOn: $settings.isLoggedIn)
            
            if settings.isLoggedIn {
                Text("Üdvözöljük, \(settings.username)!")
                    .font(.headline)
            }
        }
        .padding()
    }
}

UserSettings — ObservableObject két @Published tulajdonsággal. A ProfileView a @StateObject-en keresztül birtokolja az objektumot. Az username vagy isLoggedIn változása automatikusan újrarajzolja a ProfileView-t. A @Published a Combine Publisher-t használja a SwiftUI értesítéséhez a változásokról. A settings gyermek View-knak való átadásához használja a @ObservedObject-et:

Data Flow a SwiftUI-ban: teljes kép

Az Apple négy Data Flow szintet határoz meg a SwiftUI-ban: @State (helyi, value type), @Binding (kétirányú), @StateObject/@ObservedObject (reference type ObservableObject-tel), @EnvironmentObject (globális, injektálás környezeten keresztül). Az EnvironmentObject lehetővé teszi az adatok átadását a teljes View hierarchián keresztül explicit átadás nélkül az inicializátorban. Ezenkívül a @AppStorage a UserDefaults-szal, a @SceneStorage a jelenet állapotával, a @FetchRequest a Core Data-val működik. A Data Flow szintjének kiválasztása meghatározza az alkalmazás architektúráját: egyszerű képernyők State/Binding, moduláris — ObservedObject, nagyméretű — EnvironmentObject + Redux-szerű megoldások (TCA, Composable Architecture).