SwiftUI

Cheat Sheet'lar

SwiftUI Cheat Sheet

SwiftUI yordamida zamonaviy, deklarativ va reaktiv foydalanuvchi interfeyslarini yaratish bo'yicha mukammal tezkor ma'lumotnoma.

1. Layout (Joylashuv)

// Asosiy Stack'lar
VStack(alignment: .leading, spacing: 12) { ... }  // Vertikal ustun
HStack(alignment: .center, spacing: 8) { ... }    // Gorizontal qator
ZStack { ... }                                    // Ustma-ust joylashuv

// Bo'shliq va Chegaralar
Spacer()                                          // Mavjud bo'shliqni egallaydi
Divider()                                         // Ajratuvchi chiziq
.padding()                                        // Standart 16pt margin
.padding(.horizontal, 20)                         // Aniq yo'nalish

// Grids (Kataklar)
let columns = [GridItem(.flexible()), GridItem(.flexible())]
LazyVGrid(columns: columns, spacing: 16) {
    ForEach(items) { item in CardView(item: item) }
}

2. Matn, Rasm va SF Symbols

// Matn
Text("SwiftUI bilan ishlash")
    .font(.title2)
    .fontWeight(.semibold)
    .foregroundStyle(.primary) // iOS 15+ zamonaviy rang
    .lineLimit(2)
    .truncationMode(.tail)

// SF Symbols
Image(systemName: "bolt.badge.checkmark.fill")
    .symbolRenderingMode(.multicolor)
    .font(.system(size: 28))

// Internetdan rasm yuklash (AsyncImage)
AsyncImage(url: URL(string: "https://example.com/avatar.jpg")) { phase in
    if let image = phase.image {
        image.resizable().scaledToFill()
    } else if phase.error != nil {
        Color.red // Xatolik yuz berganda
    } else {
        ProgressView() // Yuklanish indikatori
    }
}
.frame(width: 80, height: 80)
.clipShape(Circle())

3. Boshqaruv Elementlari (Controls)

// Tugma
Button(action: { print("Saqlandi") }) {
    Label("Saqlash", systemImage: "square.and.arrow.down")
}
.buttonStyle(.borderedProminent)

// Kiritish maydonlari
TextField("Emailingizni kiriting", text: $email)
    .textFieldStyle(.roundedBorder)
    .keyboardType(.emailAddress)
    .textInputAutocapitalization(.never)

SecureField("Parol", text: $password)

// Switch & Slider
Toggle("Bildirishnomalar", isOn: $isNotifEnabled)
Slider(value: $volume, in: 0...100)

// Picker (Tanlov)
Picker("Mavzu", selection: $selectedTheme) {
    Text("Yorug'").tag("light")
    Text("Qorong'i").tag("dark")
}
.pickerStyle(.segmented)

4. Modern Navigation (iOS 16+)

Tavsiya etiladigan typed (turga asoslangan) yo'naltirish usuli:

enum Route: Hashable {
    case detail(id: Int)
    case settings
}

struct AppNavigationView: View {
    @State private var path: [Route] = []

    var body: some View {
        NavigationStack(path: $path) {
            List {
                NavigationLink(value: Route.detail(id: 42)) {
                    Text("Mahsulot 42")
                }
                NavigationLink(value: Route.settings) {
                    Text("Sozlamalar")
                }
            }
            .navigationTitle("Asosiy Ekran")
            .navigationBarTitleDisplayMode(.inline)
            .navigationDestination(for: Route.self) { route in
                switch route {
                case .detail(let id): DetailView(id: id)
                case .settings: SettingsView()
                }
            }
        }
    }
}

5. Sheets, Alerts va Dialoglar

.sheet(isPresented: $isShowingSheet) {
    ProfileSheetView()
        .presentationDetents([.medium, .large]) // iOS 16+ balandlik sozlamasi
        .presentationDragIndicator(.visible)
}

.fullScreenCover(isPresented: $isShowingFullScreen) {
    OnboardingView()
}

.alert("O'chirishni xohlaysizmi?", isPresented: $showAlert) {
    Button("Ha", role: .destructive) { deleteItem() }
    Button("Bekor qilish", role: .cancel) { }
} message: {
    Text("Bu amalni qaytarib bo'lmaydi.")
}

.confirmationDialog("Variantni tanlang", isPresented: $showOptions) {
    Button("Galereyadan") { pickImage() }
    Button("Kameradan") { openCamera() }
}

6. State Management (Holat Boshqaruvi)

iOS 17+ Modern Observable Namunasi:

import Observation

@Observable
final class UserViewModel {
    var name = "Azimjon"
    var isLoading = false

    func fetch() async {
        isLoading = true
        // API so'rovi
        isLoading = false
    }
}

struct UserProfileView: View {
    @State private var vm = UserViewModel()

    var body: some View {
        VStack {
            Text(vm.name)
            if vm.isLoading { ProgressView() }
        }
        .task { await vm.fetch() }
    }
}

7. Eng Ko'p Ishlatiladigan Modifiers

.frame(maxWidth: .infinity, alignment: .leading)
.background(.ultraThinMaterial)        // iOS loyqa shisha effekti
.clipShape(RoundedRectangle(cornerRadius: 16))
.shadow(color: .black.opacity(0.1), radius: 8, x: 0, y: 4)
.overlay(alignment: .topTrailing) { BadgeView() }

// Asinxron va qidiruv modifikatorlari
.task { await loadInitialData() }      // View ochilganda async ish boshlash
.refreshable { await refreshFeed() }   // Pull to refresh
.searchable(text: $searchText)         // Qidiruv paneli

8. Animatsiyalar va Gestures

// Explicit Animation
withAnimation(.spring(response: 0.4, dampingFraction: 0.7)) {
    isExpanded.toggle()
}

// Drag & Tap Gestures
Image(systemName: "hand.tap")
    .onTapGesture(count: 2) { print("Double tap!") }
    .gesture(
        DragGesture()
            .onChanged { value in offset = value.translation }
            .onEnded { _ in offset = .zero }
    )

9. Custom ViewModifier

Kodni toza saqlash va dizayn elementlarini qayta ishlatish:

struct PrimaryButtonStyle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.headline)
            .foregroundStyle(.white)
            .padding()
            .frame(maxWidth: .infinity)
            .background(Color.blue)
            .clipShape(Capsule())
    }
}

extension View {
    func primaryButton() -> some View {
        modifier(PrimaryButtonStyle())
    }
}

// Ishlatish:
Button("Davom etish") {}.primaryButton()