SwiftUI bilan tanishuv

SwiftUI bilan tanishuv

SwiftUI yordamida view’lar (ko‘rinishlar), state (holat) va ma’lumotlarga asoslangan yangilanishlar bilan interfeyslarni deklarativ tarzda yarating.

SwiftUI nima?

SwiftUI — Apple’ning iOS, iPadOS, macOS, watchOS va tvOS uchun ilovalar yaratishga mo‘ljallangan zamonaviy UI freymvorki.

U deklarativ: siz UI qanday ko‘rinishi kerakligini tavsiflaysiz, ma’lumotlaringiz o‘zgarganda esa SwiftUI uni yangilaydi.

Nega SwiftUI?

• Deklarativ sintaksis hamda @State, @Binding va ObservableObject yordamida reaktiv yangilanishlar.
• Barcha Apple platformalari uchun yagona API.
• Xcode’da jonli preview’lar va tezkor iteratsiya.

Birinchi "ilovamiz"ni yaratish

Avval ilovaning kirish nuqtasi (App.swift) ko‘rsatadigan oddiy hisoblagich view’ini (ContentView) yaratasiz.

Keyin xuddi shu UIni qayta tuzasiz (refactor), lekin uning state’ini view model’ga (ObservableObject) ko‘chirasiz — bu real ilovalarda yaxshiroq kengayadi.

1-qadam: oddiy misol

Sintaksis: Lokal state uchun @State dan foydalaning va uni boshqaruv elementlariga (masalan, Button) bog‘lang; VStack/Text bilan render qiling.

import SwiftUI

struct ContentView: View {
  @State private var count = 0

  var body: some View {
    VStack(spacing: 12) {
      Text("Count: \(count)")
      Button("Increment") { count += 1 }
    }
    .padding()
  }
}

import SwiftUI

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup { ContentView() }
  }
}

Ushbu misolda @State va VStack ichidagi tugma yordamida yaratilgan oddiy hisoblagich ko‘rsatilgan.

2-qadam: ObservableObject bilan state

Umumiy state’ni saqlash uchun ObservableObject dan, uni yaratadigan view’da esa uning lifecycle’iga (hayotiy sikliga) egalik qilish uchun @StateObject dan foydalaning.

@Published xususiyatlari o‘zgarganda view’lar avtomatik yangilanadi.

Sintaksis: class VM: ObservableObject { @Published var count }, @StateObject private var vm = VM(), UI’ni vm.count ga bog‘lang.

Ushbu misol yuqoridagi oddiy hisoblagichni qayta tuzadi (refactor).

UI va xatti-harakat bir xil (hisoblagich yorlig‘i va tugma), lekin endi state @StateObject tomonidan boshqariladigan CounterModel view model’ida saqlanadi. Ilovangiz o‘sgani sari bu andoza yaxshiroq kengayadi.

import SwiftUI
import Combine

class CounterModel: ObservableObject {
  @Published var count = 0
  func increment() { count += 1 }
}

import SwiftUI

struct ContentView: View {
  @StateObject private var model = CounterModel()

  var body: some View {
    VStack(spacing: 12) {
      Text("Count: \(model.count)")
      Button("Increment") { model.increment() }
    }
    .padding()
  }
}

import SwiftUI

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup { ContentView() }
  }
}

Ushbu misol state’ni ViewModel ga ko‘taradi va UI’ni view kuzatib boradigan @Published o‘zgarishlari orqali yangilaydi.

Misollarni Xcode’da ishga tushirish

Standart ish jarayoni (ushbu darslikda ishlatiladi)

Har bir misol kichik ilova sifatida ishga tushirishingiz uchun uchta faylga ajratilgan:

1. Demo.swift: Misolning asosiy kodi (view va/yoki yordamchi tiplar).
2. ContentView.swift: Demoni ko‘rsatadi (Demo.swift dagi tiplarga murojaat qiladi).
3. App.swift: WindowGroup { ContentView() } bilan barqaror ilova kirish nuqtasi.

Ixtiyoriy: Canvas Preview

Shuningdek, ilovangizning kirish nuqtasini o‘zgartirmasdan istalgan misolni Xcode’ning Canvas Preview’i orqali ishga tushirishingiz mumkin.

1. View faylini yarating: Xcode’da File > New > File... > SwiftUI View ni tanlang. Unga nom bering (masalan, FrameDemo.swift) va misoldagi view kodini unga joylang.
2. Preview qo‘shing: Faylda preview borligiga ishonch hosil qiling. PreviewProvider yoki #Preview makrosidan foydalaning.

import SwiftUI
  
  struct FrameDemo_Previews: PreviewProvider {
    static var previews: some View { FrameDemo() }
  }

import SwiftUI
  
  #Preview { FrameDemo() }

3. Canvas’ni oching: Fayl tanlangan holda Editor > Canvas ni tanlang (yoki Canvas tugmasini bosing). Agar preview ko‘rinmasa, loyihani bir marta yig‘ing (build).
4. Preview’ni ishga tushiring: Canvas’da Resume / Play tugmasini bosing. Koddagi o‘zgarishlar preview’ni yangilaydi. iPhone/iPad modellarini almashtirish uchun qurilma tanlagichidan foydalaning.
5. O‘zaro ta’sir: Preview’lar interaktiv — tugmalarni bosish, maydonlarga matn kiritish va hokazolarni bajarish mumkin.