HStack: nedir, SwiftUI'da HStack VStack ZStack

SwiftUI'da HStack Nedir?

HStack (Horizontal Stack), alt görünümleri yatay bir çizgide düzenleyen bir SwiftUI konteyneridir. Her alt öğe, aksi belirtilmedikçe ihtiyaç duyduğu kadar yer kaplar. HStack iki zorunlu parametre kabul eder: alignment (dikey hizalama, varsayılan .center) ve spacing (öğeler arası mesafe, varsayılan nil — sistem aralığı). Apple Human Interface Guidelines'a (2025) göre HStack, düğme çubukları, giriş satırları ve yatay simge listeleri için tercih edilen seçimdir.

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

Bu örnekte, HStack üç öğeden oluşan bir satır oluşturur: bir simge, metin ve bir ok. Spacer() öğeleri birbirinden ayırır — simge ve metin sol kenara, ok ise sağ kenara yapışır. Alignment .center üç öğeyi de dikey merkez ekseni boyunca hizalar.

VStack: dikey düzen ve hizalama

VStack (Vertical Stack), alt öğeleri yukarıdan aşağıya dikey olarak düzenleyen bir SwiftUI konteyneridir. HStack'e benzer şekilde, alignment (yatay hizalama: .leading, .center, .trailing) ve spacing kabul eder. VStack, formlar, kartlar, profiller ve ayar listeleri oluşturmanın temelidir. Apple Docs'a (2025) göre VStack, LazyVStack ile birlikte SwiftUI'daki dikey düzen senaryolarının %85'ini kapsar.

VStack(alignment: .leading, spacing: 8) {
    Text("Tarif adı")
        .font(.headline)
    Text("Hazırlama süresi: 30 dk")
        .font(.subheadline)
        .foregroundColor(.secondary)
    HStack(spacing: 4) {
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.8")
    }
}

alignment .leading ile VStack tüm satırları sol kenara hizalar. VStack'in içinde, derecelendirme için bir HStack iç içe geçmiştir — bu, iç içe stack'ler aracılığıyla karmaşık düzenler oluşturmanın tipik bir modelidir. Spacing 8, metin satırları arasında eşit boşluk oluşturur.

ZStack: öğeleri derinliğe göre katmanlama

ZStack (Z-ekseni Stack), alt görünümleri derinlik ekseni boyunca üst üste katmanlayan bir SwiftUI konteyneridir. ZStack gövdesindeki ilk öğe arka planda, sonuncusu ise ön planda çizilir. ZStack, üzerinde metin bulunan arka plan resimleri, özel göstergeler, katman düğmeleri ve geçiş animasyonları için kullanılır. Apple Docs'a (2025) göre ZStack varsayılan olarak tüm öğeleri merkeze hizalar (alignment: .center) ancak herhangi bir Alignment kombinasyonunu destekler.

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

Bu örnekte, ZStack üç katmanı üst üste koyar: bir dağ resmi, karartmak için yarı saydam siyah bir renk ve bir başlık metni. Alignment .bottomLeading metni sol alt köşeye sabitler. Karartma (Color.black.opacity(0.3)), resmin parlak alanlarında metin okunabilirliğini artırır.

HStack vs VStack vs ZStack: hangisini ne zaman kullanmalı

Stack seçimi düzen yönüne bağlıdır: HStack — yatay düzen (düğmeler, giriş satırları), VStack — dikey düzen (formlar, kartlar), ZStack — katmanlama (arka planlar, katmanlar). Apple Human Interface Guidelines'a (2025) göre, karmaşık düzenler için stack'ler iç içe geçer: dıştaki VStack'in içinde HStack ve ZStack bulunur. LazyHStack ve LazyVStack, büyük koleksiyonlar için tembel sürümlerdir.

Alignment ve Spacing: stack'lerin ince ayarı

alignment ve spacing parametreleri, SwiftUI stack'lerindeki alt öğelerin konumlandırılması üzerinde tam kontrol sağlar. HStack'teki Alignment, farklı yükseklikteki öğelerin dikey hizalamasını kontrol eder. VStack alignment, yatay hizalamayı kontrol eder. Spacing, stack'teki tüm alt öğeler arasındaki mesafeyi belirler. SwiftUI Lab'e (2025) göre alignment, standart (.top, .center, .bottom) veya AlignmentID aracılığıyla özel olabilir.

HStack(alignment: .top, spacing: 12) {
    Text("Başlık")
        .font(.largeTitle)
    VStack(alignment: .leading) {
        Text("Alt başlık")
        Text("Ek metin içeren açıklama")
            .font(.caption)
            .foregroundColor(.gray)
    }
}
.padding()

Burada, alignment .top büyük başlığı ve iç içe VStack'i üst kenar boyunca hizalar. Spacing 12 aralarında boşluk oluşturur. alignment .leading ile iç içe VStack, alt başlığı ve açıklamayı sol kenara hizalar. İç içe stack'ler içinde farklı alignment'ların birleştirilmesi, hassas düzen kontrolü sağlar.

İç içe stack'ler: karmaşık düzen oluşturma örnekleri

Gerçek arayüzler, iç içe HStack, VStack ve ZStack'lerin birleştirilmesiyle oluşturulur. Bir ürün kartı tipik bir örnektir: dıştaki VStack, bir resim (ZStack katmanla), bir başlık (Text), bir derecelendirme (HStack) ve bir fiyat içerir. Apple Sample Projects'e (2025) göre, stack'lerin iç içe geçme derinliği nadiren 4 seviyeyi aşar — daha derin iç içe geçme, kod okunabilirliğini ve performansı düşürü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("Akıllı Telefon Model X")
        .font(.headline)
    HStack(spacing: 8) {
        Text("$999")
            .font(.title2)
            .bold()
        Spacer()
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.7")
    }
}
.padding()

Bu örnekte, VStack bir ZStack (indirim rozetli resim), bir ürün adı ve bir HStack (fiyat + derecelendirme) birleştirir. ZStack, «-20%» rozetini sağ üst köşeye yerleştirmek için alignment .topTrailing kullanır. HStack'teki Spacer, fiyatı sol kenara ve derecelendirmeyi sağ kenara iter.