Published on

SwiftUI da VStack, HStack, va ZStack

Authors

Hammaga salom!

Hammaga salom! Men Nikman. Bu video siz kutgan video bo‘lishi mumkin – bu videoda stacklar haqida gaplashamiz. SwiftUI’da stacklar ekrandagi elementlarni tekislashning oson usuli – ularni chapdan o‘ngga, yuqoridan pastga yoki oldidan orqaga joylashtirish uchun ishlatiladi.

Biz SwiftUI’dagi uch asosiy stack turini ko‘rib chiqamiz:

  • HStack – gorizontal (chapdan o‘ngga).
  • VStack – vertikal (yuqoridan pastga).
  • ZStack – Z-indeksi (oldinga-orqaga).

Men sizlarga ularni ekranga qanday qo‘shishni, so‘ngra moslashtirishni – freymlar, oraliqlar va tekislashni o‘zgartirib, ajoyib dizaynlarni qanday yaratishni ko‘rsataman. Keyin esa stacklar ichida stacklar qanday qo‘llanilishini ko‘rsataman – ha, stacklarni bir-birining ichiga cheksiz joylashtirib, murakkab ekranlar qurish mumkin. SwiftUI’da har bir ekranda stacklardan foydalanasiz, shuning uchun ularni moslashtirish, tekislash va bir-biri bilan qanday ishlashini to‘liq tushunish juda muhim.

Umid qilamanki, sizlar ham men kabi hayajondasiz – keling, stacklashni boshlaymiz! (Bu o‘ylaganimdan sal salqinroq chiqdi, keling, kod yozamiz!)

Yangi fayl yaratish

Xcode loyihamizga qaytdim. Bu videodagi kod uchun yangi fayl yaratyapman:

  1. Project Navigator’da (chapda) o‘ng tugmani bosing.
  2. “New File” > “SwiftUI View”ni tanlang.
  3. Fayl nomini “StacksBootcamp” deb qo‘ying.

Fayl ochilgach, o‘ngdagi preview’da “Resume” tugmasini bosing – preview ulanadi.

VStack (Vertikal Stack)

Uch turdagi stackni ko‘rib chiqamiz:

// VStack - vertikal (yuqoridan pastga)
// HStack - gorizontal (chapdan o‘ngga)
// ZStack - Z-indeksi (oldinga-orqaga)

VStack bilan boshlaymiz:

VStack {
    Rectangle()
        .fill(Color.red)
        .frame(width: 100, height: 100)
    Rectangle()
        .fill(Color.green)
        .frame(width: 100, height: 100)
    Rectangle()
        .fill(Color.orange)
        .frame(width: 100, height: 100)
}
  • VStack – elementlarni vertikal joylashtiradi.
  • Birinchi qizil to‘rtburchak yuqorida, oxirgi to‘q sariq pastda.

HStack (Gorizontal Stack)

HStack {
    Rectangle()
        .fill(Color.red)
        .frame(width: 100, height: 100)
    Rectangle()
        .fill(Color.green)
        .frame(width: 100, height: 100)
    Rectangle()
        .fill(Color.orange)
        .frame(width: 100, height: 100)
}
  • HStack – elementlarni gorizontal joylashtiradi.
  • Qizil chapda, to‘q sariq o‘ngda.

ZStack (Z-indeksi Stack)

ZStack {
    Rectangle()
        .fill(Color.red)
        .frame(width: 150, height: 150)
    Rectangle()
        .fill(Color.green)
        .frame(width: 130, height: 130)
    Rectangle()
        .fill(Color.orange)
        .frame(width: 100, height: 100)
}
  • ZStack – elementlarni oldinga-orqaga qatlamlaydi.
  • Birinchi (qizil) orqada, oxirgi (to‘q sariq) oldida – o‘lchamlar farqi tufayli ko‘rinadi.

Tekislash (Alignment)

ZStack(alignment: .topLeading) {
    Rectangle()
        .fill(Color.red)
        .frame(width: 150, height: 150)
    Rectangle()
        .fill(Color.green)
        .frame(width: 130, height: 130)
    Rectangle()
        .fill(Color.orange)
        .frame(width: 100, height: 100)
}
  • alignment: .topLeading – ZStack ichidagi elementlarni yuqori chapga tekislaydi.
  • .trailing, .bottom va boshqa variantlar ham mavjud.

VStack tekislash

VStack(alignment: .leading, spacing: 30) {
    Rectangle()
        .fill(Color.red)
        .frame(width: 200, height: 200)
    Rectangle()
        .fill(Color.green)
        .frame(width: 150, height: 150)
    Rectangle()
        .fill(Color.orange)
        .frame(width: 100, height: 100)
}
  • .leading – chapga tekislaydi.
  • spacing: 30 – elementlar orasiga 30 piksel bo‘shliq qo‘shadi (standart – 8).

HStack tekislash

HStack(alignment: .top, spacing: 0) {
    Rectangle()
        .fill(Color.red)
        .frame(width: 200, height: 200)
    Rectangle()
        .fill(Color.green)
        .frame(width: 150, height: 150)
    Rectangle()
        .fill(Color.orange)
        .frame(width: 100, height: 100)
}
  • .top – yuqoriga tekislaydi.
  • spacing: 0 – oraliqni yo‘q qiladi.

Stacklar ichida stacklar

Stacklarni bir-birining ichiga joylashtirish:

ZStack {
    Rectangle()
        .fill(Color.yellow)
        .frame(width: 350, height: 500)
    VStack(spacing: 30) {
        Rectangle()
            .fill(Color.red)
            .frame(width: 150, height: 150)
        Rectangle()
            .fill(Color.green)
            .frame(width: 100, height: 100)
        HStack(alignment: .bottom) {
            Rectangle()
                .fill(Color.purple)
                .frame(width: 50, height: 50)
            Rectangle()
                .fill(Color.pink)
                .frame(width: 75, height: 75)
            Rectangle()
                .fill(Color.blue)
                .frame(width: 25, height: 25)
        }
        .background(Color.white)
    }
    .background(Color.black)
}
  • ZStack: Sariq fon (350x500).
  • VStack: Qizil, yashil va HStack (qora fon bilan).
  • HStack: Uchta kichik to‘rtburchak (oq fon bilan), pastga tekislangan.

Real dunyo misoli

VStack(alignment: .center, spacing: 20) {
    Text("5")
        .font(.largeTitle)
        .underline()
    Text("Items in your cart")
        .font(.caption)
        .foregroundColor(.gray)
}
  • VStack: Savatdagi buyumlar soni – “5” yuqorida, “Items in your cart” pastda, markazga tekislangan, 20 piksel oraliq bilan.

ZStack vs Background

VStack(spacing: 50) {
    ZStack {
        Circle()
            .frame(width: 100, height: 100)
        Text("1")
            .font(.title)
            .foregroundColor(.white)
    }
    Text("1")
        .font(.title)
        .foregroundColor(.white)
        .background(
            Circle()
                .frame(width: 100, height: 100)
        )
}
  • ZStack: Doira orqada, matn oldida.
  • Background: Matn oldida, doira orqada – ikkalasi bir xil ko‘rinadi.
  • Tavsiya: Oddiy qatlamlar uchun .background() ishlatish qulay; murakkab qatlamlar uchun ZStack.

Xulosa

Bu videoda stacklarni:

  • Qo‘shish (VStack, HStack, ZStack),
  • Moslashtirish (spacing, alignment),
  • Ichma-ich joylashtirishni o‘rgandik.

Stacklar SwiftUI’da har bir ekranda ishlatiladi – ularni yaxshi tushunsangiz, professional darajaga chiqasiz. Video uzunroq bo‘ldi, lekin foydali bo‘ldi deb umid qilaman! Men Nikman, bu “Swiftful Thinking”, keyingi videoda ko‘rishguncha!

Buy mea coffee