Published on: Tuesday, August 11, 2026

SwiftUI-da @Binding property wrapper

Authors

Name
ShoxruxC
@iOSdasturchi

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

Bu videoda @Binding property wrapper haqida gaplashamiz. Ushbu mavzuni tushunish uchun ikki oldingi video kerak:

@State property wrapper — ikki video oldin
Subviewlarni ajratish — oldingi video

Agar ularni ko'rmagan bo'lsangiz, avval o'sha videolarni ko'rib keling.

`@Binding` nima?

@Binding — ota view (parent view) dagi @State o'zgaruvchisini bola viewga (child view) ulash uchun ishlatiladi.

Misol: asosiy ekranda fon rangi @State o'zgaruvchisi sifatida saqlanadi. Tugma alohida subviewda joylashgan. Shu tugma bosilganda asosiy ekranning fon rangini o'zgartirmoqchimiz. Buning uchun @Binding ishlatamiz — u bola viewdagi o'zgaruvchini ota viewdagi @State bilan bog'laydi.

Qisqacha aytganda:

@State — o'zgaruvchi qayerda e'lon qilingan bo'lsa
@Binding — o'zgaruvchi boshqa joydan ulanib kelgan bo'lsa

Yangi fayl yaratish

Navigatorda o'ng tugma bosib yangi SwiftUI fayli yarating. Uni BindingBootcamp deb nomlang va Create tugmasini bosing. Canvas-da Resume bosing.

Boshlang'ich ko'rinish

Avval oddiy ekran quramiz — yashil fon va bitta tugma. Tugma bosilganda fon to'q sariq rangga o'zgaradi:

struct BindingBootcamp: View {

    @State var backgroundColor: Color = .green

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

            Button(action: {
                backgroundColor = .orange
            }, label: {
                Text("Tugma")
                    .foregroundColor(.white)
                    .padding()
                    .padding(.horizontal)
                    .background(Color.blue)
                    .cornerRadius(10)
            })
        }
    }
}

Bu oldingi videolarda o'rgangan narsalarimiz. Canvas-da Resume bosib tekshirib ko'ring.

Tugmani subviewga ajratish

Oldingi videodagi kabi tugmani alohida subviewga ajratamiz. Lekin bu safar muammo paydo bo'ladi:

struct BindingBootcamp: View {

    @State var backgroundColor: Color = .green

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

            ButtonView()
        }
    }
}

struct ButtonView: View {
    var body: some View {
        Button(action: {
            // ❌ Xato: backgroundColor bu yerda mavjud emas
            backgroundColor = .orange
        }, label: {
            Text("Tugma")
                .foregroundColor(.white)
                .padding()
                .padding(.horizontal)
                .background(Color.blue)
                .cornerRadius(10)
        })
    }
}

ButtonView ichida backgroundColor tanilmaydi — chunki u BindingBootcamp-da e'lon qilingan. Xcode Cannot find 'backgroundColor' in scope degan xato beradi.

Noto'g'ri yechim — yangi `@State` yaratish

Birinchi fikr — ButtonView ichiga yangi @State qo'shish:

// ❌ Bu noto'g'ri
@State var backgroundColor: Color = .green

Bu yangi, alohida o'zgaruvchi yaratadi. U ota viewdagi backgroundColor bilan hech qanday aloqasi yo'q — ikki o'zgaruvchi mustaqil ishlaydi.

To'g'ri yechim — `@Binding`

@State o'rniga @Binding ishlatiladi. Bu yangi o'zgaruvchi yaratmaydi, balki ota viewdagi mavjud @State-ga ulanadi:

struct ButtonView: View {

    @Binding var backgroundColor: Color

    var body: some View {
        Button(action: {
            backgroundColor = .orange
        }, label: {
            Text("Tugma")
                .foregroundColor(.white)
                .padding()
                .padding(.horizontal)
                .background(Color.blue)
                .cornerRadius(10)
        })
    }
}

Ota viewda ulash

ButtonView chaqirilganda $ belgisi bilan o'zgaruvchini uzatamiz. $ belgisi "bu o'zgaruvchini binding sifatida uzat" degan ma'noni bildiradi:

struct BindingBootcamp: View {

    @State var backgroundColor: Color = .green

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

            // $ belgisi bilan binding uzatilmoqda
            ButtonView(backgroundColor: $backgroundColor)
        }
    }
}

Endi ButtonView ichida backgroundColor o'zgartirilsa, u avtomatik ota viewdagi @State o'zgaruvchisini ham o'zgartiradi.

Kengaytirilgan misol

Keling, ko'proq o'zgaruvchi qo'shamiz — sarlavha va tugma rangi:

struct BindingBootcamp: View {

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

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

            VStack(spacing: 20) {
                Text(title)
                    .foregroundColor(.white)

                ButtonView(
                    backgroundColor: $backgroundColor,
                    title: $title
                )
            }
        }
    }
}

struct ButtonView: View {

    @Binding var backgroundColor: Color
    @Binding var title: String

    // Bu o'zgaruvchi faqat shu subviewda kerak — @State ishlatiladi
    @State var buttonColor: Color = .blue

    var body: some View {
        Button(action: {
            backgroundColor = .orange    // ota view o'zgaradi
            title = "Yangi sarlavha"     // ota view o'zgaradi
            buttonColor = .pink          // faqat shu subview o'zgaradi
        }, label: {
            Text("Tugma")
                .foregroundColor(.white)
                .padding()
                .padding(.horizontal)
                .background(buttonColor)
                .cornerRadius(10)
        })
    }
}

Canvas-da Resume bosib live preview-ni sinab ko'ring:

Tugma bosilganda fon to'q sariq bo'ladi
Sarlavha "Yangi sarlavha" ga o'zgaradi
Tugmaning o'zi pushti rangga kiradi

Fon va sarlavha ota viewda, tugma rangi esa faqat bola viewda boshqarilmoqda.

`@State` va `@Binding` — qaysi birini ishlatish kerak?

Holat	Ishlatish kerak
O'zgaruvchi shu viewda e'lon qilinadi	`@State`
O'zgaruvchi ota viewdan ulanib keladi	`@Binding`
O'zgaruvchi faqat shu subviewda kerak	`@State` (mahalliy)
O'zgaruvchi ota viewga ham ta'sir qilishi kerak	`@Binding`

`$` belgisi haqida

// Oddiy qiymat uzatish (o'zgarmaydi)
ButtonView(title: title)

// Binding uzatish (o'zgarsa ota view ham o'zgaradi)
ButtonView(title: $title)

Xulosa

Bu videoda o'rgandik:

@Binding — ota viewdagi @State o'zgaruvchisini bola viewga ulaydi
$ belgisi — o'zgaruvchini binding sifatida uzatish uchun ishlatiladi
@State — o'zgaruvchi qaerda birinchi marta e'lon qilinsa, o'sha yerda
@Binding — o'zgaruvchi boshqa viewdan kelsa, o'sha yerda
Bola viewda faqat o'sha viewga tegishli o'zgaruvchilar @State bo'lishi kerak

Keyingi videolarda @State va @Binding-ni hamma joyda ishlatamiz — ularni yaxshi tushunib olish juda muhim!

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

@Binding nima?