@State — mahalliy View holati

@State-ni SwiftUI sizning view'ingiz uchun boshqaradigan maxsus saqlash qutisi (storage locker) deb tasavvur qiling. Ushbu qutiga qiymat qo'yganingizda, SwiftUI uni kuzatib boradi. Biror narsa bu qiymatni o'zgartirishi bilanoq, SwiftUI undan foydalanadigan view'ning har bir qismini avtomatik ravishda qaytadan chizadi. Siz qo'shimcha hech narsa qilishingiz shart emas — ulanish avtomatik ravishda amalga oshiriladi.

Nima uchun View’larga State (Holat) kerak darsida siz oddiy o'zgaruvchi nima uchun ishlamasligini ko'rdingiz: SwiftUI o'zgarishni ko'ra olmaydi va baribir struct'lar o'zgarmas (immutable) hisoblanadi. @State har ikkala muammoni ham birdaniga hal qiladi. U qiymatni struct'dan tashqarida saqlaydi (shuning uchun uni o'zgartirish mumkin bo'ladi) va SwiftUI-ga o'zgarishlarni kuzatishni aytadi (shuning uchun qayta chizish avtomatik ravishda sodir bo'ladi).

Ushbu darsning oxirida siz @State xususiyatlarini qanday e'lon qilish va ulardan foydalanishni bilib olasiz, nima uchun ular har doim private deb belgilanishini tushunasiz hamda real vaqt rejimida foydalanuvchi kiritishiga javob beradigan hisoblagichlar, tugmalar (toggles) va matn maydonlarini (text fields) qurasiz.

Sizning birinchi @State xususiyatingiz

Mana avvalgi darsdagi hisoblagich — endi u @State yordamida tuzatilgan:

Nima uchun private? @State xususiyatlari har doim private deb belgilanishi kerak. Holat (state) faqat bitta view tomonidan egalik qilinishi uchun mo'ljallangan. Agar boshqa view uni o'qishi yoki yozishi kerak bo'lsa, siz @Binding-dan foydalanasiz — bu keyingi darsimizning mavzusi.

Har xil turdagi qiymatlar bilan @State

@State Bool (Toggle yordamida yoqish va o'chirish)

@State private var isOn = false

VStack {
    // Toggle reads and writes isOn automatically
    Toggle("Enable notifications", isOn: $isOn)
        .padding()

    // Ternary operator shows different text based on isOn's value
    Text(isOn ? "Notifications: On" : "Notifications: Off")
        .foregroundStyle(isOn ? .green : .red)
}

$isOn sintaksisi holatga bog'lanish (binding) yaratadi — Toggle qiymatni o'qishi va yozishi kerak bo'lganligi sababli unga binding kerak bo'ladi. Siz bog'lanishlarni (bindings) keyingi darsda to'liq tushunib olasiz.

@State String (foydalanuvchidan matn kiritishni qabul qilish)

@State private var name = ""

VStack(spacing: 12) {
    // TextField needs a binding because it writes back to name as the user types
    TextField("Enter your name", text: $name)
        .textFieldStyle(.roundedBorder)
        .padding()

    // This Text re-renders every keystroke as name changes
    Text("Hello, \(name.isEmpty ? "stranger" : name)!")
        .font(.title2)
}

Foydalanuvchi kiritgan har bir belgi name holatini yangilaydi, bu esa Text-ni qayta chizishga majbur qiladi. Buni simulyatorda sinab ko'rsangiz, matn har bir tugma bosilganda yangilanishini ko'rasiz.

Shartli view'lar bilan @State (holatga qarab ui qismlarini ko'rsatish yoki yashirish)

@State private var showDetails = false

VStack(spacing: 16) {
    Button(showDetails ? "Hide Details" : "Show Details") {
        // Toggle the Bool — SwiftUI re-renders the conditional block below
        showDetails.toggle()
    }

    // This entire block only renders when showDetails is true
    if showDetails {
        Text("Here are the details you asked for.")
            .padding()
            .background(.blue.opacity(0.1))
            .cornerRadius(8)
    }
}

SwiftUI if blokini view ierarxiyasining bir qismi sifatida baholaydi. showDetails o'zgarganda, SwiftUI ushbu blokni interfeysga qo'shadi yoki undan olib tashlaydi. Bu bildirishnomalar, ogohlantirishlar va kengaytiriladigan bo'limlar uchun juda keng tarqalgan patterndir.

Animatsiya bilan @State (holat o'zgarishini silliq animatsiya qilish)

@State private var isExpanded = false

VStack {
    Button("Toggle Size") {
        // withAnimation wraps the state change — SwiftUI animates the diff
        withAnimation(.spring()) {
            isExpanded.toggle()
        }
    }

    // The frame size is driven by state — the animation happens between the two sizes
    RoundedRectangle(cornerRadius: 12)
        .fill(.blue)
        .frame(width: isExpanded ? 200 : 80, height: isExpanded ? 200 : 80)
}

State o'zgarishini withAnimation bloki ichida bajarish SwiftUI-ga eski va yangi holat o'rtasidagi o'tishni to'satdan emas, balki silliq animatsiya bilan amalga oshirishni aytadi.

Tezkor ma'lumotnoma

Topshiriq: like (Yoqdi) tugmasini yaratish

LikeButtonView deb nomlangan view yarating. Unda ikkita state bo'lsin: liked (yoqqanligi) uchun Bool va like soni uchun Int (boshlang'ich qiymati 42). Tugma bosilganda liked holatini o'zgartiring va like soniga 1 qo'shing yoki 1 ayiring. Yoqqanida qizil yurak (heart.fill), yoqmaganida esa oddiy yurak (heart) rasmini ko'rsating. Yurak yonida joriy like sonini ko'rsating. Yaxshi tap hissi berish uchun state o'zgarishini withAnimation(.spring()) bilan o'rang.