Published on

SwiftUI-da Group β€” bir nechta elementga modifier qo'llash

Authors

Bu qisqa video. Group β€” VStack, HStack, ZStack kabi bir to'plam, lekin layout-ni o'zgartirmaydi. Asosiy maqsadi: bir nechta elementga bir vaqtda modifier qo'llash.

Muammo β€” modifierni ko'p joyga yozish

VStack(spacing: 50) {
    Text("Salom dunyo 1")
    Text("Salom dunyo 2")
    Text("Salom dunyo 3")
}
.foregroundColor(.red) // hammaga qo'llanadi β€” yaxshi

Hammaga bir xil modifier β€” muammo yo'q. Lekin faqat 2 ta elementga o'ziga xos modifier qo'ymoqchi bo'lsak:

// ❌ Kod takrorlanadi β€” yaxshi emas
VStack(spacing: 50) {
    Text("Salom dunyo 1")
        .font(.caption)
        .foregroundColor(.green)
    Text("Salom dunyo 2")
        .font(.caption)
        .foregroundColor(.green)
    Text("Salom dunyo 3")
}
.foregroundColor(.red)

Ko'proq element bo'lsa β€” har biriga alohida modifier yozish charchattiradi va kod katta bo'lib ketadi.

1-yechim: Ichki VStack

VStack(spacing: 50) {
    // Ichki VStack β€” ishlaydi, lekin ortiqcha qatlam
    VStack(spacing: 50) {
        Text("Salom dunyo 1")
        Text("Salom dunyo 2")
    }
    .font(.caption)
    .foregroundColor(.green)

    Text("Salom dunyo 3")
}
.foregroundColor(.red)

Bu ishlaydi, lekin ortiqcha VStack qatlami paydo bo'ladi. Layout o'zgarishi mumkin.

2-yechim: Group β€” eng to'g'ri usul

VStack(spacing: 50) {
    // Group β€” layout o'zgarmaydi, faqat birgalikda guruhlanadi
    Group {
        Text("Salom dunyo 1")
        Text("Salom dunyo 2")
    }
    .font(.caption)
    .foregroundColor(.green)

    Text("Salom dunyo 3")
}
.foregroundColor(.red)

Group elementlarni mantiqiy guruh sifatida birlashtiradi, lekin ekranda hech qanday o'zgarish bo'lmaydi β€” xuddi VStack ichida alohida turishgandek ko'rinadi.

VStack vs Group β€” farqi

// VStack β€” elementlarni ustma-ust joylashtiradi (yangi layout qatlami)
VStack {
    Text("1")
    Text("2")
}

// Group β€” faqat mantiqiy guruh, layout o'zgarmaydi
Group {
    Text("1")
    Text("2")
}
VStack / HStackGroup
Layout o'zgaradimiHa β€” yangi qatlamYo'q β€” mavjud layout saqlanadi
Modifier qo'llashHaHa
Qachon ishlatishJoylashuv o'zgartirish kerakFaqat modifier qo'llash kerak

Xulosa

// Bir xil modifier-larni ko'p elementga qo'yish kerak bo'lsa
// va yangi stack qatlami keraksiz bo'lsa β€” Group ishlating

Group {
    Text("Element 1")
    Text("Element 2")
    Text("Element 3")
}
.font(.headline)
.foregroundColor(.blue)
// Uchala elementga bir vaqtda qo'llanadi
// Layout o'zgarmaydi

Murakkab view-lar yaratishda Group kod takrorlanishini kamaytiradi va tuzilmani tartibli saqlaydi.

Rahmat, men Nick, bu Swiftful Thinking va keyingi videoda ko'rishguncha!

Buy mea coffee