HStack: bu nədir, HStack VStack ZStack SwiftUI-də

SwiftUI-də HStack nədir?

HStack (Horizontal Stack) — SwiftUI konteyneridir, uşaq görünüşləri üfüqi sıraya düzür. Hər bir uşaq elementi, başqa cür göstərilməyibsə, ehtiyacı qədər yer tutur. HStack iki məcburi parametr qəbul edir: alignment (şaquli düzləndirmə, standart .center) və spacing (elementlər arası məsafə, standart nil — sistem məsafəsi). Apple Human Interface Guidelines (2025) məlumatına görə, HStack düymə panelləri, daxiletmə sətirləri və üfüqi işarə siyahıları üçün üstünlük verilən seçimdir.

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

Bu nümunədə HStack üç elementdən ibarət sətir yaradır: işarə, mətn və ox. Spacer() elementləri ayırır — işarə və mətn sol kənara, ox isə sağ kənara sıxılır. Alignment .center hər üç elementi şaquli oxun mərkəzinə düzləndirir.

VStack: şaquli düzülüş və düzləndirmə

VStack (Vertical Stack) — uşaq elementlərini yuxarıdan aşağıya şaquli düzmək üçün SwiftUI konteyneridir. HStack kimi, alignment (üfüqi düzləndirmə: .leading, .center, .trailing) və spacing qəbul edir. VStack formalar, kartlar, profillər və parametr siyahıları qurmağın əsasıdır. Apple Docs (2025) məlumatına görə, VStack LazyVStack ilə birlikdə SwiftUI-də şaquli düzülüş ssenarilərinin 85%-ni əhatə edir.

VStack(alignment: .leading, spacing: 8) {
    Text("Reseptin adı")
        .font(.headline)
    Text("Hazırlanma vaxtı: 30 dəq")
        .font(.subheadline)
        .foregroundColor(.secondary)
    HStack(spacing: 4) {
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.8")
    }
}

VStack alignment .leading ilə bütün sətirləri sol kənara düzləndirir. VStack-in içində reytinq üçün HStack yerləşib — bu, iç-içə steklər vasitəsilə mürəkkəb maketlər qurmağın tipik nümunəsidir. Spacing 8 mətn sətirləri arasında bərabər məsafə yaradır.

ZStack: elementlərin dərinlik üzrə üst-üstə yerləşdirilməsi

ZStack (Z-axis Stack) — uşaq görünüşlərini dərinlik oxu üzrə bir-birinin üstünə yerləşdirmək üçün SwiftUI konteyneridir. ZStack-in gövdəsində birinci element fonda, sonuncu isə ön planda çəkilir. ZStack üzərində mətn olan fon şəkilləri, fərdi göstəricilər, üst-üstə düymələr və keçid animasiyaları üçün istifadə olunur. Apple Docs (2025) məlumatına görə, ZStack standart olaraq bütün elementləri mərkəzə düzləndirir (alignment: .center), lakin Alignment-in istənilən kombinasiyasını dəstəkləyir.

ZStack(alignment: .bottomLeading) {
    Image("mountains")
        .resizable()
        .scaledToFill()
        .frame(height: 200)
        .clipped()
    Color.black
        .opacity(0.3)
    Text("Dağ mənzərəsi")
        .font(.title)
        .bold()
        .foregroundColor(.white)
        .padding()
}

Bu nümunədə ZStack üç qat yerləşdirir: dağ şəkli, qaraltma üçün yarı şəffaf qara rəng və başlıqlı mətn. Alignment .bottomLeading mətni sol aşağı küncə sıxır. Qaraltma (Color.black.opacity(0.3)) şəklin işıqlı hissələrində mətnin oxunmasını yaxşılaşdırır.

HStack, VStack və ZStack müqayisəsi: nə vaxt hansını istifadə etməli

Stek seçimi düzülüş istiqamətindən asılıdır: HStack — üfüqi düzülüş (düymələr, daxiletmə sətirləri), VStack — şaquli düzülüş (formalar, kartlar), ZStack — üst-üstə yerləşdirmə (fonlar, örtüklər). Apple Human Interface Guidelines (2025) məlumatına görə, mürəkkəb maketlər üçün steklər iç-içə yerləşdirilir: xarici VStack daxilində HStack və ZStack olur. LazyHStack və LazyVStack böyük kolleksiyalar üçün tənbəl versiyalardır.

Alignment və Spacing: steklərin incə tənzimlənməsi

Alignment və spacing parametrləri SwiftUI steklərində uşaq elementlərinin yerləşməsinə tam nəzarət verir. HStack-də alignment müxtəlif hündürlükdə olan elementlərin şaquli düzləndirilməsini idarə edir. VStack alignment üfüqi düzləndirməni idarə edir. Spacing stekdəki bütün uşaq elementləri arasındakı məsafəni təyin edir. SwiftUI Lab (2025) məlumatına görə, alignment həm standart (.top, .center, .bottom), həm də AlignmentID vasitəsilə fərdi ola bilər.

HStack(alignment: .top, spacing: 12) {
    Text("Başlıq")
        .font(.largeTitle)
    VStack(alignment: .leading) {
        Text("Altbaşlıq")
        Text("Əlavə mətnlə təsvir")
            .font(.caption)
            .foregroundColor(.gray)
    }
}
.padding()

Burada alignment .top böyük başlığı və iç-içə VStack-i yuxarı kənara düzləndirir. Spacing 12 onların arasında məsafə yaradır. Alignment .leading ilə iç-içə VStack altbaşlığı və təsviri sol kənara düzləndirir. İç-içə steklərdə müxtəlif alignment kombinasiyası maketi dəqiq idarə etməyə imkan verir.

İç-içə steklər: mürəkkəb maketlərin qurulması nümunələri

Həqiqi interfeyslər iç-içə HStack, VStack və ZStack kombinasiyası ilə qurulur. Məhsul kartı — tipik nümunə: xarici VStack şəkil (örtüklü ZStack), başlıq (Text), reytinq (HStack) və qiyməti ehtiva edir. Apple Sample Projects (2025) məlumatına görə, steklərin iç-içə dərinliyi nadir hallarda 4 səviyyəni keçir — daha dərin iç-içəlik kodun oxunaqlığını və performansı azaldır.

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()

Bu nümunədə VStack ZStack (endirim nişanı olan şəkil), məhsul adı və HStack (qiymət + reytinq) birləşdirir. ZStack «-20%» nişanını yuxarı sağ küncə yerləşdirmək üçün alignment .topTrailing istifadə edir. HStack-də Spacer qiyməti sol kənara, reytinqi isə sağ kənara ayırır.