मोबाइल डेवलपमेंट में SwiftUI: यह क्या है, प्रमुख अवधारणाएँ और यह कैसे काम करता है

मूल बातें (View Protocol, body, some View, @ViewBuilder)

View Protocol SwiftUI का केंद्रीय प्रोटोकॉल है। इसमें एक ही गुण आवश्यक है: var body: some View। body एक computed property है जो UI विवरण लौटाता है। SwiftUI प्रत्येक स्थिति परिवर्तन पर body को कॉल करता है और परिणाम को GPU पर रेंडर करता है।

@ViewBuilder

@ViewBuilder Views के लिए Result Builder है। यह बिना return और बिना TupleView के एक क्लोज़र के अंदर कई Views लिखने की अनुमति देता है। यह if/else, switch, ForEach का समर्थन करता है। सभी कंटेनर (VStack, HStack, ZStack, Group) @ViewBuilder का उपयोग करते हैं। एक विकल्प बिना लेआउट के समूहीकरण के लिए Group { … } है। some View एक Opaque Type है। कंपाइलर विशिष्ट View प्रकार (Text, Button, VStack आदि) जानता है, लेकिन इसे बाहरी रूप से some View के रूप में लौटाता है। यह हस्ताक्षर बदले बिना body के प्रकार को बदलने की अनुमति देता है। ViewModifier — View संशोधक: .font(), .padding(), .background()। ViewModifier प्रोटोकॉल और .modifier() के माध्यम से कस्टम संशोधक।

// @ViewBuilder और NavigationStack के साथ View का उदाहरण
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")
                    }
                }
            }
        }
    }
}

// @StateObject के साथ DetailView
struct DetailView: View {
    let item: String
    @StateObject private var viewModel = DetailViewModel()

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

मॉडिफ़ायर और कंटेनर (ViewModifier, NavigationStack, List, Form)

NavigationStack (iOS 16+) — डेटा-संचालित नेविगेशन। एक पथ (हैशेबल मानों की सरणी) लेता है और navigationDestination के माध्यम से गंतव्य प्रदर्शित करता है। गंतव्य दृश्यों के साथ NavigationLink को बदलता है। NavigationLink — स्टैक को नेविगेट करने के लिए बटन। List — सेक्शन, स्वाइप, हटाने और ड्रैग-एंड-ड्रॉप के साथ वर्टिकल सूची। Form — सेटिंग्स के लिए विशेष List: सेक्शन, पिकर, टॉगल, टेक्स्ट फ़ील्ड। Section — हेडर और फ़ुटर के साथ List/Form में समूहीकरण। ViewModifier — शैलियों के पुन: उपयोग के लिए कस्टम संशोधक। .modifier(CustomModifier()) — अनुप्रयोग।

List और Form विस्तार से

List SwiftUI में UITableView के समतुल्य है। .onDelete, .onMove, .refreshable का समर्थन करता है। SwipeActions — .swipeActions { Button("हटाएं", role: .destructive) { } }. Form — सेटिंग्स के लिए अनुकूलित: DatePicker, Toggle, Stepper, Picker। हेडर/फ़ुटर के साथ Section — समूहीकरण के लिए। OutlineGroup — पदानुक्रमिक सूचियाँ (सेक्शन के साथ UITableView के समतुल्य)। DisclosureGroup — सामग्री के साथ संक्षेपणीय अनुभाग। IT Sectr डेटा के लिए List और सेटिंग्स के लिए Form की अनुशंसा करता है।

PreviewProvider — Xcode Canvas में पूर्वावलोकन के लिए प्रोटोकॉल। Canvas — इंटरैक्टिव SwiftUI पूर्वावलोकन (@main और Swift 5.9+ आवश्यक)। @ScaledMetric — अनुकूली आकार जो Dynamic Type के साथ स्केल होता है।

स्थिति प्रबंधन (@StateObject, @ObservedObject, @EnvironmentObject, @FocusState)

Property Wrappers SwiftUI में स्थिति प्रबंधन की नींव हैं। @State — स्थानीय स्थिति (value type)। @Binding — पैरेंट स्थिति से कनेक्शन। @StateObject — ObservableObject बनाता है। SwiftUI ऑब्जेक्ट के जीवनचक्र का प्रबंधन करता है। @ObservedObject — बाहरी ObservableObject का अवलोकन करता है। @EnvironmentObject — परिवेश से ऑब्जेक्ट (.environmentObject() के माध्यम से डिपेंडेंसी इंजेक्शन)। @Environment — सिस्टम मान (.colorScheme, .locale)। @AppStorage — UserDefaults। @FetchRequest — Core Data क्वेरी। @FocusState — इनपुट फ़ोकस।

@StateObject बनाम @ObservedObject: @StateObject एक ऑब्जेक्ट बनाता है, @ObservedObject उसका अवलोकन करता है। पदानुक्रम में प्रारंभिक मॉडल निर्माण के लिए @StateObject का उपयोग करें, चाइल्ड व्यू में पास करने के लिए @ObservedObject का। @FocusState — फ़ोकस प्रबंधन: .focused($field, equals: .email)। एकाधिक फ़ील्ड के लिए enum का समर्थन करता है।

Environment Values और DI

@Environment — सिस्टम मान: colorScheme, locale, sizeCategory, layoutDirection, managedObjectContext। कस्टम Environment Values — EnvironmentKey के माध्यम से कस्टम मान। डिपेंडेंसी इंजेक्शन के लिए उपयोग किया जाता है: स्पष्ट पैरामीटर के बिना सेवाएँ पास करना। .environment() मॉडिफ़ायर — पदानुक्रम में मान सेट करता है। @EnvironmentObject — .environmentObject() से ObservableObject। @Environment से अलग है क्योंकि यह एक संदर्भ प्रकार पास करता है। IT Sectr सिस्टम मानों के लिए @Environment और सेवाओं के लिए @EnvironmentObject की अनुशंसा करता है।

जीवनचक्र (.task, .onAppear, .onDisappear)

.task{} — व्यू प्रकट होने पर एसिंक्रोनस ऑपरेशन। गायब होने पर स्वत: रद्दीकरण। async/await के लिए .onAppear को बदलता है। .onAppear{} — प्रकट होने पर सिंक्रोनस ऑपरेशन। .onDisappear{} — गायब होने पर ऑपरेशन। .onChange(of:) — मान परिवर्तन पर प्रतिक्रिया। .onReceive(Publisher) — Combine पब्लिशर पर प्रतिक्रिया। SwiftUI में View जीवनचक्र: init → onAppear → body (रेंडरिंग) → onDisappear। स्थिति परिवर्तन पर: body → diff → पुन: रेंडर। IT Sectr एसिंक्रोनस लोडिंग के लिए .task और एनालिटिक्स के लिए .onAppear की अनुशंसा करता है।

SwiftUI में एनीमेशन

.animation() — एनीमेशन मॉडिफ़ायर। .transition() — प्रकट/गायब एनीमेशन। withAnimation — स्पष्ट स्थिति परिवर्तन एनीमेशन। matchedGeometryEffect — विभिन्न व्यू के बीच एनीमेशन (हीरो एनीमेशन)। PhaseAnimator (iOS 17+) — enum पर आधारित मल्टी-फ़ेज़ एनीमेशन। KeyframeAnimator (iOS 17+) — कीफ़्रेम के साथ फ़्रेम-दर-फ़्रेम एनीमेशन। SwiftUI एनिमेशन Core Animation के माध्यम से GPU पर चलते हैं। IT Sectr प्राकृतिक एनिमेशन के लिए .spring() और भौतिक प्रभावों के लिए .interpolatingSpring की अनुशंसा करता है।

डेटा प्रवाह (Bindings, @Published, ObservableObject)

ObservableObject — @Published गुणों वाले ऑब्जेक्ट के लिए प्रोटोकॉल। SwiftUI objectWillChange पब्लिशर की सदस्यता लेता है। @Published — गुण परिवर्तन प्रकाशित करता है। @StateObject — ObservableObject बनाता है, जीवनचक्र प्रबंधित करता है। @ObservedObject — बाहरी का अवलोकन करता है। Combine — रिएक्टिव प्रोग्रामिंग के लिए फ्रेमवर्क। @EnvironmentObject — परिवेश के माध्यम से DI। .environmentObject() सेट करता है, @EnvironmentObject पढ़ता है। MVVM — मानक आर्किटेक्चर: View (SwiftUI) — ViewModel (ObservableObject) — Model। IT Sectr मुख्य ViewModels के लिए MVVM + @StateObject की अनुशंसा करता है।

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

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

एक्सेसिबिलिटी और स्थानीयकरण

एक्सेसिबिलिटी SwiftUI में: .accessibilityLabel(), .accessibilityHint(), .accessibilityValue(), .accessibilityAddTraits()। VoiceOver एक्सेसिबिलिटी लेबल पढ़ता है। Dynamic Type — @ScaledMetric, @DynamicProperty। स्थानीयकरण: String(localized:) (SwiftUI + String Catalog)। LocalizedStringKey — स्वचालित अनुवाद। बहुवचन नियम — String Catalog के माध्यम से (one, few, many, other)। दाएँ-से-बाएँ (अरबी, हिब्रू) — स्वचालित रूप से समर्थित। .environment(.layoutDirection, .rightToLeft)। IT Sectr सभी इंटरैक्टिव तत्वों के लिए एक्सेसिबिलिटी लेबल की अनुशंसा करता है।

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 समर्थन
struct ScalableText: View {
    @ScaledMetric private var fontSize: CGFloat = 17

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

चार्ट और विज़ुअलाइज़ेशन (Swift Charts)

Swift Charts (iOS 16+) — चार्ट बनाने के लिए फ्रेमवर्क। Chart { } — मूल कंटेनर। BarMark, LineMark, PointMark, AreaMark, RuleMark — मार्क। डेटा के लिए ForEach। ChartAxis — अक्ष अनुकूलन। .chartXAxis, .chartYAxis। ChartLegend — लीजेंड। इंटरपोलेशन — catmullRom, linear, step। एनीमेशन — Chart के लिए .animation()। IT Sectr अंतर्निहित चार्ट के लिए Swift Charts और जटिल चार्ट के लिए Charts (DGCharts) की अनुशंसा करता है।

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 का डिपेंडेंसी मैनेजर। Xcode में एकीकृत। समर्थन करता है: बाइनरी पैकेज, संसाधन, परीक्षण, swift-6 सख्त समवर्ती। semver टैग के साथ GitHub के माध्यम से पैकेज प्रकाशन। SPM CocoaPods और Carthage की जगह Swift डिपेंडेंसी के लिए डी-फैक्टो मानक है। IT Sectr सभी नए प्रोजेक्ट के लिए SPM की अनुशंसा करता है।

Swift Concurrency (async/await, TaskGroup, AsyncSequence) — async/await Swift 5.5+ में निर्मित। Task — एसिंक्रोनिसिटी की इकाई। TaskGroup — समानांतर कार्य। AsyncSequence — एसिंक्रोनस अनुक्रम (AsyncStream, AsyncAlgorithms)। Task Local Values — Task के लिए प्रासंगिक डेटा। Swift Concurrency एसिंक्रोनस संचालन के लिए Combine को पूरी तरह से बदल देता है।