HStack: bu nima, HStack VStack ZStack SwiftUI-da

SwiftUI-da HStack nima?

HStack (Horizontal Stack) — bu SwiftUI konteyneri bo'lib, bola ko'rinishlarni gorizontal chiziqqa joylashtiradi. Har bir bola elementi, boshqacha ko'rsatilmagan bo'lsa, kerakli darajada joy egallaydi. HStack ikkita majburiy parametrni qabul qiladi: alignment (vertikal tekislash, standart .center) va spacing (elementlar orasidagi masofa, standart nil — tizim masofasi). Apple Human Interface Guidelines (2025) ma'lumotlariga ko'ra, HStack tugma panellari, kiritish qatorlari va gorizontal ikonka ro'yxatlari uchun afzal ko'rilgan tanlovdir.

HStack(alignment: .center, spacing: 16) {
    Image("star")
        .resizable()
        .frame(width: 24, height: 24)
    Text("Sevimlilar")
        .font(.body)
    Spacer()
    Image("chevron.right")
        .foregroundColor(.gray)
}
.padding()

Ushbu misolda HStack uch elementdan iborat qator yaratadi: ikonka, matn va strelka. Spacer() elementlarni bir-biridan ajratadi — ikonka matn bilan chap chekkaga, strelka esa o'ng chekkaga suriladi. Alignment .center uchala elementni vertikal o'qning markaziga tekislaydi.

VStack: vertikal joylashuv va tekislash

VStack (Vertical Stack) — bu bola elementlarni yuqoridan pastga vertikal joylashtirish uchun SwiftUI konteyneri. HStack kabi, alignment (gorizontal tekislash: .leading, .center, .trailing) va spacing qabul qiladi. VStack formalar, kartalar, profillar va sozlamalar ro'yxatini qurishning asosidir. Apple Docs (2025) ma'lumotlariga ko'ra, VStack LazyVStack bilan birgalikda SwiftUI-dagi vertikal joylashuv stsenariylarining 85% ni qamrab oladi.

VStack(alignment: .leading, spacing: 8) {
    Text("Retsept nomi")
        .font(.headline)
    Text("Tayyorlash vaqti: 30 daq")
        .font(.subheadline)
        .foregroundColor(.secondary)
    HStack(spacing: 4) {
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.8")
    }
}

VStack alignment .leading bilan barcha qatorlarni chap chekkaga tekislaydi. VStack ichida reyting uchun HStack joylashgan — bu ichma-ich steklar orqali murakkab maketlar qurishning odatiy namunasidir. Spacing 8 matn qatorlari orasida bir tekis masofa yaratadi.

ZStack: elementlarni chuqurlik bo'ylab ustma-ust joylashtirish

ZStack (Z-axis Stack) — bu bola ko'rinishlarni chuqurlik o'qi bo'ylab bir-birining ustiga joylashtirish uchun SwiftUI konteyneri. ZStack tanasidagi birinchi element fonda, oxirgisi esa oldingi planda chiziladi. ZStack ustida matn bo'lgan fon rasmlari, moslashtirilgan ko'rsatkichlar, ustma-ust tugmalar va o'tish animatsiyalari uchun ishlatiladi. Apple Docs (2025) ma'lumotlariga ko'ra, ZStack standart sifatida barcha elementlarni markazga tekislaydi (alignment: .center), lekin Alignment-ning istalgan kombinatsiyasini qo'llab-quvvatlaydi.

ZStack(alignment: .bottomLeading) {
    Image("mountains")
        .resizable()
        .scaledToFill()
        .frame(height: 200)
        .clipped()
    Color.black
        .opacity(0.3)
    Text("Tog' manzarasi")
        .font(.title)
        .bold()
        .foregroundColor(.white)
        .padding()
}

Ushbu misolda ZStack uchta qatlamni joylashtiradi: tog'lar tasviri, qoraytirish uchun yarim shaffof qora rang va sarlavhali matn. Alignment .bottomLeading matnni pastki chap burchakka suriladi. Qoraytirish (Color.black.opacity(0.3)) tasvirning yorug' qismlarida matnning o'qilishini yaxshilaydi.

HStack, VStack va ZStack solishtirish: qachon qaysi birini ishlatish

Stekni tanlash joylashuv yo'nalishiga bog'liq: HStack — gorizontal joylashuv (tugmalar, kiritish qatorlari), VStack — vertikal joylashuv (formalar, kartalar), ZStack — ustma-ust joylashtirish (fonlar, qoplamalar). Apple Human Interface Guidelines (2025) ma'lumotlariga ko'ra, murakkab maketlar uchun steklar bir-birining ichiga joylashtiriladi: tashqi VStack ichida HStack va ZStack bo'ladi. LazyHStack va LazyVStack katta kolleksiyalar uchun len versiyalardir.

Alignment va Spacing: steklarni nozik sozlash

Alignment va spacing parametrlari SwiftUI steklarida bola elementlarning joylashishi ustidan to'liq nazorat beradi. HStack-dagi alignment turli balandlikdagi elementlarning vertikal tekislanishini boshqaradi. VStack-dagi alignment gorizontal tekislashni boshqaradi. Spacing stekdagi barcha bola elementlar orasidagi masofani belgilaydi. SwiftUI Lab (2025) ma'lumotlariga ko'ra, alignment standart (.top, .center, .bottom) va AlignmentID orqali moslashtirilgan bo'lishi mumkin.

HStack(alignment: .top, spacing: 12) {
    Text("Sarlavha")
        .font(.largeTitle)
    VStack(alignment: .leading) {
        Text("Pastki sarlavha")
        Text("Qo'shimcha matn bilan tavsif")
            .font(.caption)
            .foregroundColor(.gray)
    }
}
.padding()

Bu yerda alignment .top katta sarlavha va ichma-ich VStackni yuqori chekkaga tekislaydi. Spacing 12 ular orasida masofa yaratadi. Alignment .leading bilan ichma-ich VStack pastki sarlavha va tavsifni chap chekkaga tekislaydi. Ichma-ich steklarda turli alignment kombinatsiyasi maketni aniq boshqarish imkonini beradi.

Ichma-ich steklar: murakkab maketlarni qurish misollari

Haqiqiy interfeyslar ichma-ich HStack, VStack va ZStack kombinatsiyasi bilan quriladi. Mahsulot kartasi — odatiy misol: tashqi VStack rasm (qoplamali ZStack), sarlavha (Text), reyting (HStack) va narxni o'z ichiga oladi. Apple Sample Projects (2025) ma'lumotlariga ko'ra, steklarning ichma-ich chuqurligi kamdan-kam 4 darajadan oshadi — chuqurroq ichma-ichlik kod o'qilishini va unumdorlikni pasaytiradi.

VStack(spacing: 12) {
    ZStack(alignment: .topTrailing) {
        Image("product")
            .resizable()
            .scaledToFit()
        Text("-20%")
            .font(.caption)
            .bold()
            .foregroundColor(.white)
            .padding(6)
            .background(Color.red)
            .cornerRadius(4)
    }
    Text("Smartfon Model X")
        .font(.headline)
    HStack(spacing: 8) {
        Text("$999")
            .font(.title2)
            .bold()
        Spacer()
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.7")
    }
}
.padding()

Ushbu misolda VStack ZStack (chegirma nishoni bilan rasm), mahsulot nomi va HStack (narx + reyting) ni birlashtiradi. ZStack «-20%» nishonini yuqori o'ng burchakka joylashtirish uchun alignment .topTrailing dan foydalanadi. HStack-dagi Spacer narxni chap chekkaga, reytingni esa o'ng chekkaga suriladi.