Published on

SwiftUI-da @State property wrapper

Authors

Hammaga xush kelibsiz! Mening ismim Nick, bu — Swiftful Thinking kanali.

Bu videoda SwiftUI-ning eng muhim va eng kuchli xususiyatlaridan biri — @State property wrapper haqida gaplashamiz.

@State nima?

Kodda biror o'zgaruvchiga @State property wrapper bersak, biz asosan ko'rinishga (view) shuni aytamiz:

"Bu o'zgaruvchining holatini kuzat, chunki u o'zgarsa, ko'rinishni yangilash kerak bo'lishi mumkin."

Oddiy misol: ekranda fon rangi bo'lsin. Ekran ochiq turganida fon rangini o'zgartirishni istasak, o'sha rangga @State beramiz. Shunda o'zgaruvchi o'zgarganda ko'rinish ham avtomatik yangilanadi.

@State property wrapper SwiftUI-da juda ko'p ishlatiladi va keyingi barcha videolarda undan foydalanamiz. Shuning uchun uni yaxshi tushunib olish juda muhim.

Yangi fayl yaratish

Navigatorda o'ng tugma bosib yangi SwiftUI fayli yarating. Uni StateBootcamp deb nomlang.

Nomda @ belgisini ishlatmang — faqat StateBootcamp deb yozing.

Faylni yaratgandan so'ng canvas-da Resume tugmasini bosing.

Ekranni sozlash

Avval oldingi videolarda o'rgangan narsalarimiz bilan ekranni quramiz:

struct StateBootcamp: View {
    var body: some View {
        ZStack {
            // Fon qatlami
            Color.red
                .ignoresSafeArea(.all)

            // Kontent qatlami
            VStack(spacing: 20) {
                Text("Sarlavha")
                    .font(.title)

                Text("Son: 1")
                    .font(.headline)
                    .underline()

                HStack(spacing: 20) {
                    Button("Tugma 1") {
                        // hozircha bo'sh
                    }

                    Button("Tugma 2") {
                        // hozircha bo'sh
                    }
                }
            }
            .foregroundColor(.white)
        }
    }
}

VStack ichidagi barcha elementlarga .foregroundColor(.white) berish uchun uni to'g'ridan-to'g'ri VStack-ning o'ziga qo'shdik — har bir elementga alohida yozishning hojati yo'q.

O'zgaruvchini ajratib chiqarish

Fon rangini kod ichida emas, alohida o'zgaruvchida saqlaylik:

struct StateBootcamp: View {

    let backgroundColor: Color = .green

    var body: some View {
        ZStack {
            backgroundColor
                .ignoresSafeArea(.all)
            // ...
        }
    }
}

Endi Color.red o'rniga backgroundColor o'zgaruvchisi ishlatilmoqda. Canvas-da Resume bosib ko'rsangiz, fon yashil rangda ko'rinadi.

var va @State var farqi

Tugmalar bosilganda fon rangini o'zgartirmoqchi bo'lsak, let o'rniga var ishlatishimiz kerak. var tizimga bu o'zgaruvchi o'zgarishi mumkinligini bildiradi.

Lekin SwiftUI-da bu yetarli emas — ko'rinishga ham bu o'zgaruvchi o'zgarishi mumkinligini aytish kerak. Buning uchun @State ishlatamiz:

@State var backgroundColor: Color = .green

@State var ko'rinishga shuni aytadi:

"Bu o'zgaruvchining holatini doim kuzatib tur. U o'zgarsa, ko'rinishni yangilab qo'y."

Tugmalar bilan fon rangini o'zgartirish

struct StateBootcamp: View {

    @State var backgroundColor: Color = .green

    var body: some View {
        ZStack {
            backgroundColor
                .ignoresSafeArea(.all)

            VStack(spacing: 20) {
                Text("Sarlavha")
                    .font(.title)

                Text("Son: 1")
                    .font(.headline)
                    .underline()

                HStack(spacing: 20) {
                    Button("Tugma 1") {
                        backgroundColor = .red
                    }

                    Button("Tugma 2") {
                        backgroundColor = .purple
                    }
                }
            }
            .foregroundColor(.white)
        }
    }
}

Canvas-da Resume bosib live preview-ni ishga tushiring:

  • Dastlab fon yashil
  • Tugma 1 bosilsa — qizil
  • Tugma 2 bosilsa — binafsha

@State bilan String o'zgartirish

@State faqat ranglar uchun emas — istalgan turga qo'llash mumkin. Sarlavhani ham @State bilan boshqaraylik:

@State var myTitle: String = "Sarlavha"

Keyin tugmalar bosilganda sarlavhani o'zgartiramiz:

struct StateBootcamp: View {

    @State var backgroundColor: Color = .green
    @State var myTitle: String = "Sarlavha"

    var body: some View {
        ZStack {
            backgroundColor
                .ignoresSafeArea(.all)

            VStack(spacing: 20) {
                Text(myTitle)
                    .font(.title)

                Text("Son: 1")
                    .font(.headline)
                    .underline()

                HStack(spacing: 20) {
                    Button("Tugma 1") {
                        backgroundColor = .red
                        myTitle = "Tugma 1 bosildi"
                    }

                    Button("Tugma 2") {
                        backgroundColor = .purple
                        myTitle = "Tugma 2 bosildi"
                    }
                }
            }
            .foregroundColor(.white)
        }
    }
}

Endi tugma bosilganda ham fon rangi, ham sarlavha mazmuni o'zgaradi.

@State bilan sonni o'zgartirish — hisoblagich

Endi Int turidagi o'zgaruvchini ham @State bilan boshqaramiz. Tugma 1 bosganда son oshsin, tugma 2 bosganда kamaysin:

@State var count: Int = 0

O'zgaruvchini matn ichida ko'rsatish uchun \() sintaksisi ishlatiladi:

Text("Son: \(count)")

Tugmalardagi amalni qisqaroq yozish mumkin:

// To'liq yozuv:
count = count + 1

// Qisqa yozuv (ikkalasi bir xil):
count += 1

To'liq kod:

struct StateBootcamp: View {

    @State var backgroundColor: Color = .green
    @State var myTitle: String = "Sarlavha"
    @State var count: Int = 0

    var body: some View {
        ZStack {
            backgroundColor
                .ignoresSafeArea(.all)

            VStack(spacing: 20) {
                Text(myTitle)
                    .font(.title)

                Text("Son: \(count)")
                    .font(.headline)
                    .underline()

                HStack(spacing: 20) {
                    Button("Tugma 1") {
                        backgroundColor = .red
                        myTitle = "Tugma 1 bosildi"
                        count += 1
                    }

                    Button("Tugma 2") {
                        backgroundColor = .purple
                        myTitle = "Tugma 2 bosildi"
                        count -= 1
                    }
                }
            }
            .foregroundColor(.white)
        }
    }
}

Live preview-da:

  • Tugma 1 bosilgan sari son oshib boradi
  • Tugma 2 bosilgan sari son kamayib boradi
  • Fon rangi va sarlavha ham shunga mos o'zgaradi

@State nimaga qo'llash mumkin?

@State istalgan o'zgaruvchiga qo'llanishi mumkin:

  • Rang — Color
  • Matn — String
  • Son — Int, Double
  • Shrift o'lchami — CGFloat
  • Bo'shliq — CGFloat
  • Tugma sarlavhasi — String

Qoida oddiy: o'zgaruvchini kod ichidan ajratib chiqaring, unga @State bering, ko'rinish qolganini o'zi hal qiladi.

Mashq

Uyda o'zingiz bir nechta ko'rinish yarating va shular bilan ishlang:

  • Ranglarni o'zgartiring
  • Shrift o'lchamini o'zgartiring
  • Kenglik va balandliklarni o'zgartiring
  • Istalgan narsa — faqat @State bilan ishlashga ko'nik

Bu keyingi videolarda juda muhim bo'ladi.

Xulosa

Bu videoda o'rgandik:

  • @State — ko'rinishga o'zgaruvchi holatini kuzatishni buyuradi
  • var o'zgarishi mumkin, lekin SwiftUI-da @State var kerak
  • @State istalgan turga (String, Bool, Int, Color va boshqalar) qo'llanadi
  • count += 1 — count = count + 1 ning qisqartmasi
  • \(o'zgaruvchi) — matn ichida o'zgaruvchi qiymatini ko'rsatish usuli

Keyingi videoda yangi mavzu bilan davom etamiz!

Rahmat tomosha qilganingiz uchun! Men — Nick, bu Swiftful Thinking. Keyingi videoda ko'rishamiz!

Buy mea coffee