SwiftUI sa Mobile Development: Ano Ito, Mga Pangunahing Konsepto at Paano Ito Gumagana

Mga Batayan (View Protocol, body, some View, @ViewBuilder)

View Protocol ang sentral na protocol ng SwiftUI. Kailangan lamang ng isang property: var body: some View. body ay isang computed property na nagbabalik ng paglalarawan ng UI. Tinatawag ng SwiftUI ang body sa bawat pagbabago ng estado at nirerender ang resulta sa GPU.

@ViewBuilder

@ViewBuilder ay isang Result Builder para sa Views. Nagbibigay-daan sa pagsulat ng maraming Views sa loob ng closure nang walang return at walang TupleView. Sumusuporta sa if/else, switch, ForEach. Lahat ng container (VStack, HStack, ZStack, Group) ay gumagamit ng @ViewBuilder. Ang alternatibo ay Group { … } para sa pagpapangkat nang walang layout. some View ay isang Opaque Type. Alam ng compiler ang konkreto na uri ng View (Text, Button, VStack, atbp.), ngunit ibinabalik ito sa panlabas bilang some View. Pinapayagan nito ang pagbabago ng uri ng body nang hindi binabago ang lagda. ViewModifier — modifier ng View: .font(), .padding(), .background(). Custom modifier sa pamamagitan ng ViewModifier protocol at .modifier().

// Halimbawa ng View na may @ViewBuilder at 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 na may @StateObject
struct DetailView: View {
    let item: String
    @StateObject private var viewModel = DetailViewModel()

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

Mga Modifier at Container (ViewModifier, NavigationStack, List, Form)

NavigationStack (iOS 16+) — nabigasyon na batay sa datos. Kumukuha ng landas (array ng hashable na halaga) at ipinapakita ang patutunguhan sa pamamagitan ng navigationDestination. Pumapalit sa NavigationLink na may mga patutunguhang view. NavigationLink — button para sa nabigasyon sa stack. List — patayong listahan na may mga seksyon, swipe, pagtanggal at drag-and-drop. Form — isang List na espesyalisado para sa mga setting: mga seksyon, pumili, toggle, text field. Section — pagpapangkat sa List/Form na may header at footer. ViewModifier — custom modifier para sa muling paggamit ng mga estilo. .modifier(CustomModifier()) — aplikasyon.

List at Form nang Detalyado

List sa SwiftUI ay katumbas ng UITableView. Sumusuporta sa .onDelete, .onMove, .refreshable. SwipeActions — .swipeActions { Button("Tanggalin", role: .destructive) { } }. Form — na-optimize para sa mga setting: DatePicker, Toggle, Stepper, Picker. Section na may header/footer — para sa pagpapangkat. OutlineGroup — mga listahang hierarkikal (katumbas ng UITableView na may mga seksyon). DisclosureGroup — natitiklop na seksyon na may nilalaman. Inirerekomenda ng IT Sectr ang List para sa datos at Form para sa mga setting.

PreviewProvider — protocol para sa mga preview sa Xcode Canvas. Canvas — interaktibong preview ng SwiftUI (nangangailangan ng @main at Swift 5.9+). @ScaledMetric — sukat na umaangkop na sumusukat sa Dynamic Type.

Pamamahala ng Estado (@StateObject, @ObservedObject, @EnvironmentObject, @FocusState)

Property Wrappers ang pundasyon ng pamamahala ng estado sa SwiftUI. @State — lokal na estado (uri ng halaga). @Binding — koneksyon sa estado ng magulang. @StateObject — lumilikha ng ObservableObject. Pinamamahalaan ng SwiftUI ang siklo ng buhay ng object. @ObservedObject — minamasdan ang panlabas na ObservableObject. @EnvironmentObject — object mula sa kapaligiran (dependency injection sa pamamagitan ng .environmentObject()). @Environment — mga halaga ng sistema (.colorScheme, .locale). @AppStorage — UserDefaults. @FetchRequest — query ng Core Data. @FocusState — pokus ng input.

@StateObject vs @ObservedObject: @StateObject lumilikha ng object, @ObservedObject minamasdan ito. Gamitin ang @StateObject para sa unang paggawa ng modelo sa hierarchy, @ObservedObject para sa pagpasa sa mga view ng anak. @FocusState — pamamahala ng pokus: .focused($field, equals: .email). Sumusuporta sa enum para sa maraming field.

Mga Halaga ng Kapaligiran at DI

@Environment — mga halaga ng sistema: colorScheme, locale, sizeCategory, layoutDirection, managedObjectContext. Custom na Halaga ng Kapaligiran — custom na halaga sa pamamagitan ng EnvironmentKey. Ginagamit para sa dependency injection: pagpasa ng mga serbisyo nang walang tahasang parameter. .environment() modifier — nagtatakda ng halaga sa hierarchy. @EnvironmentObject — ObservableObject mula sa .environmentObject(). Naiiba sa @Environment dahil nagpapasa ito ng uri ng sanggunian. Inirerekomenda ng IT Sectr ang @Environment para sa mga halaga ng sistema at @EnvironmentObject para sa mga serbisyo.

Siklo ng Buhay (.task, .onAppear, .onDisappear)

.task{} — asinkronong operasyon kapag lumitaw ang view. Awtomatikong pagkansela kapag nawala. Pumapalit sa .onAppear para sa async/await. .onAppear{} — sinkronong operasyon kapag lumitaw. .onDisappear{} — operasyon kapag nawala. .onChange(of:) — reaksyon sa mga pagbabago ng halaga. .onReceive(Publisher) — reaksyon sa publisher ng Combine. Siklo ng buhay ng View sa SwiftUI: init → onAppear → body (rendering) → onDisappear. Sa pagbabago ng estado: body → diff → muling pag-render. Inirerekomenda ng IT Sectr ang .task para sa asinkronong pag-load at .onAppear para sa analytics.

Animasyon sa SwiftUI

.animation() — modifier ng animasyon. .transition() — animasyon ng paglitaw/paglaho. withAnimation — tahasang animasyon ng pagbabago ng estado. matchedGeometryEffect — animasyon sa pagitan ng iba't ibang view (hero animation). PhaseAnimator (iOS 17+) — multi-phase na animasyon batay sa enum. KeyframeAnimator (iOS 17+) — frame-by-frame na animasyon na may mga keyframe. Ang mga animasyon ng SwiftUI ay tumatakbo sa GPU sa pamamagitan ng Core Animation. Inirerekomenda ng IT Sectr ang .spring() para sa natural na animasyon at .interpolatingSpring para sa pisikal na epekto.

Daloy ng Datos (Bindings, @Published, ObservableObject)

ObservableObject — protocol para sa mga object na may @Published na property. Nag-subscribe ang SwiftUI sa objectWillChange publisher. @Published — naglalathala ng mga pagbabago ng property. @StateObject — lumilikha ng ObservableObject, pinamamahalaan ang siklo ng buhay. @ObservedObject — minamasdan ang panlabas. Combine — framework para sa reaktibong programming. @EnvironmentObject — DI sa pamamagitan ng kapaligiran. .environmentObject() nagtatakda, @EnvironmentObject nagbabasa. MVVM — karaniwang arkitektura: View (SwiftUI) — ViewModel (ObservableObject) — Model. Inirerekomenda ng IT Sectr ang MVVM + @StateObject para sa pangunahing ViewModel.

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

Accessibility at Lokalisasyon

Accessibility sa SwiftUI: .accessibilityLabel(), .accessibilityHint(), .accessibilityValue(), .accessibilityAddTraits(). Binabasa ng VoiceOver ang mga label ng accessibility. Dynamic Type — @ScaledMetric, @DynamicProperty. Lokalisasyon: String(localized:) (SwiftUI + String Catalog). LocalizedStringKey — awtomatikong pagsasalin. Mga tuntunin ng maramihan — sa pamamagitan ng String Catalog (one, few, many, other). Kanan-papuntang-Kaliwa (Arabe, Hebreo) — awtomatikong sinusuportahan. .environment(.layoutDirection, .rightToLeft). Inirerekomenda ng IT Sectr ang mga label ng accessibility para sa lahat ng interaktibong elemento.

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)
    }
}

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

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

Mga Tsart at Biswalisasyon (Swift Charts)

Swift Charts (iOS 16+) — framework para sa pagbuo ng mga tsart. Chart { } — pangunahing container. BarMark, LineMark, PointMark, AreaMark, RuleMark — marka. ForEach para sa datos. ChartAxis — pagpapasadya ng axis. .chartXAxis, .chartYAxis. ChartLegend — alamat. Interpolasyon — catmullRom, linear, step. Animasyon — .animation() para sa Chart. Inirerekomenda ng IT Sectr ang Swift Charts para sa built-in na tsart at Charts (DGCharts) para sa kumplikado.

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) — tagapamahala ng dependency ng Apple. Isinama sa Xcode. Sumusuporta sa: binary package, resources, test, swift-6 mahigpit na konkurensiya. Paglalathala ng package sa pamamagitan ng GitHub na may semver tag. Ang SPM ang de facto na pamantayan para sa mga dependency ng Swift, na pumapalit sa CocoaPods at Carthage. Inirerekomenda ng IT Sectr ang SPM para sa lahat ng bagong proyekto.

Swift Concurrency (async/await, TaskGroup, AsyncSequence) — async/await na binuo sa Swift 5.5+. Task — yunit ng asinkronisidad. TaskGroup — magkakatulad na gawain. AsyncSequence — asinkronong pagkakasunod-sunod (AsyncStream, AsyncAlgorithms). Task Local Values — kontekstwal na datos para sa Task. Ang Swift Concurrency ay ganap na pumapalit sa Combine para sa asinkronong operasyon.