HStack: یہ کیا ہے، SwiftUI میں HStack VStack ZStack

SwiftUI میں HStack کیا ہے؟

HStack (Horizontal Stack) ایک SwiftUI کنٹینر ہے جو چائلڈ ویوز کو افقی لائن میں ترتیب دیتا ہے۔ ہر چائلڈ عنصر اتنی جگہ لیتا ہے جتنی اسے ضرورت ہے، جب تک کہ دوسری صورت میں وضاحت نہ کی گئی ہو۔ HStack دو لازمی پیرامیٹرز قبول کرتا ہے: alignment (عمودی الائنمنٹ، ڈیفالٹ .center) اور spacing (عناصر کے درمیان فاصلہ، ڈیفالٹ nil — سسٹم اسپیسنگ)۔ Apple Human Interface Guidelines (2025) کے مطابق، HStack بٹن بار، ان پٹ قطاروں اور افقی آئیکن فہرستوں کے لیے ترجیحی انتخاب ہے۔

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

اس مثال میں، HStack تین عناصر کی ایک قطار بناتا ہے: ایک آئیکن، متن اور ایک تیر۔ Spacer() عناصر کو الگ کرتا ہے — آئیکن اور متن بائیں کنارے پر، اور تیر دائیں کنارے پر چپک جاتے ہیں۔ Alignment .center تینوں عناصر کو عمودی مرکزی محور کے ساتھ الائن کرتا ہے۔

VStack: عمودی ترتیب اور الائنمنٹ

VStack (Vertical Stack) ایک SwiftUI کنٹینر ہے جو چائلڈ عناصر کو اوپر سے نیچے عمودی طور پر ترتیب دیتا ہے۔ HStack کی طرح، یہ alignment (افقی الائنمنٹ: .leading, .center, .trailing) اور spacing قبول کرتا ہے۔ VStack فارم، کارڈ، پروفائل اور سیٹنگز فہرستوں کی تعمیر کی بنیاد ہے۔ Apple Docs (2025) کے مطابق، VStack LazyVStack کے ساتھ SwiftUI میں 85% عمودی لے آؤٹ منظرناموں کا احاطہ کرتا ہے۔

VStack(alignment: .leading, spacing: 8) {
    Text("ترکیب کا نام")
        .font(.headline)
    Text("تیاری کا وقت: 30 منٹ")
        .font(.subheadline)
        .foregroundColor(.secondary)
    HStack(spacing: 4) {
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.8")
    }
}

alignment .leading کے ساتھ VStack تمام قطاروں کو بائیں کنارے پر الائن کرتا ہے۔ VStack کے اندر، ریٹنگ کے لیے ایک HStack نیسٹڈ ہے — یہ نیسٹڈ اسٹیک کے ذریعے پیچیدہ لے آؤٹ بنانے کا ایک عام نمونہ ہے۔ Spacing 8 متن کی قطاروں کے درمیان یکساں فاصلہ بناتا ہے۔

ZStack: گہرائی کے مطابق عناصر کی تہہ بندی

ZStack (Z-axis Stack) ایک SwiftUI کنٹینر ہے جو چائلڈ ویوز کو گہرائی کے محور پر ایک دوسرے کے اوپر تہہ کرتا ہے۔ ZStack باڈی میں پہلا عنصر پس منظر میں کھینچا جاتا ہے، آخری — پیش منظر میں۔ ZStack پس منظر کی تصاویر پر متن، کسٹم انڈیکیٹر، اوورلے بٹن اور ٹرانزیشن اینیمیشن کے لیے استعمال ہوتا ہے۔ Apple Docs (2025) کے مطابق، ZStack ڈیفالٹ طور پر تمام عناصر کو مرکز میں الائن کرتا ہے (alignment: .center) لیکن Alignment کے کسی بھی امتزاج کو سپورٹ کرتا ہے۔

ZStack(alignment: .bottomLeading) {
    Image("mountains")
        .resizable()
        .scaledToFill()
        .frame(height: 200)
        .clipped()
    Color.black
        .opacity(0.3)
    Text("پہاڑی منظر")
        .font(.title)
        .bold()
        .foregroundColor(.white)
        .padding()
}

اس مثال میں، ZStack تین تہیں رکھتا ہے: ایک پہاڑ کی تصویر، دھندلا کرنے کے لیے ایک نیم شفاف سیاہ رنگ اور ایک عنوان کا متن۔ Alignment .bottomLeading متن کو نیچے بائیں کونے میں پن کرتا ہے۔ دھندلا کرنا (Color.black.opacity(0.3)) تصویر کے روشن حصوں پر متن کی پڑھنے کی اہلیت کو بہتر بناتا ہے۔

HStack بمقابلہ VStack بمقابلہ ZStack: کب کون سا استعمال کریں

اسٹیک کا انتخاب لے آؤٹ کی سمت پر منحصر ہے: HStack — افقی ترتیب (بٹن، ان پٹ قطاریں)، VStack — عمودی ترتیب (فارم، کارڈ)، ZStack — تہہ بندی (پس منظر، اوورلے)۔ Apple Human Interface Guidelines (2025) کے مطابق، پیچیدہ لے آؤٹ کے لیے اسٹیک ایک دوسرے کے اندر نیسٹڈ ہوتے ہیں: ایک بیرونی VStack کے اندر HStack اور ZStack ہوتے ہیں۔ LazyHStack اور LazyVStack بڑے کلیکشن کے لیے سست ورژن ہیں۔

Alignment اور Spacing: اسٹیک کی باریک ٹیوننگ

alignment اور spacing پیرامیٹرز SwiftUI اسٹیک میں چائلڈ عناصر کی پوزیشننگ پر مکمل کنٹرول دیتے ہیں۔ HStack میں Alignment مختلف اونچائیوں والے عناصر کی عمودی الائنمنٹ کو کنٹرول کرتا ہے۔ VStack alignment افقی الائنمنٹ کو کنٹرول کرتا ہے۔ Spacing اسٹیک میں تمام چائلڈ عناصر کے درمیان فاصلہ متعین کرتا ہے۔ SwiftUI Lab (2025) کے مطابق، alignment معیاری (.top, .center, .bottom) یا AlignmentID کے ذریعے کسٹم ہو سکتا ہے۔

HStack(alignment: .top, spacing: 12) {
    Text("عنوان")
        .font(.largeTitle)
    VStack(alignment: .leading) {
        Text("ذیلی عنوان")
        Text("اضافی متن کے ساتھ وضاحت")
            .font(.caption)
            .foregroundColor(.gray)
    }
}
.padding()

یہاں، alignment .top بڑے عنوان اور نیسٹڈ VStack کو اوپری کنارے پر الائن کرتا ہے۔ Spacing 12 ان کے درمیان فاصلہ بناتا ہے۔ alignment .leading والا نیسٹڈ VStack ذیلی عنوان اور وضاحت کو بائیں کنارے پر الائن کرتا ہے۔ نیسٹڈ اسٹیک کے اندر مختلف alignments کا امتزاج عین مطابق لے آؤٹ کنٹرول کی اجازت دیتا ہے۔

نیسٹڈ اسٹیک: پیچیدہ لے آؤٹ بنانے کی مثالیں

حقیقی انٹرفیس نیسٹڈ HStack، VStack اور ZStack کے امتزاج سے بنائے جاتے ہیں۔ ایک پروڈکٹ کارڈ ایک عام مثال ہے: ایک بیرونی VStack میں ایک تصویر (ZStack اوورلے کے ساتھ)، ایک عنوان (Text)، ایک ریٹنگ (HStack) اور ایک قیمت ہوتی ہے۔ Apple Sample Projects (2025) کے مطابق، اسٹیک کی نیسٹنگ گہرائی شاذ و نادر ہی 4 سطحوں سے تجاوز کرتی ہے — گہری نیسٹنگ کوڈ پڑھنے کی اہلیت اور کارکردگی کو کم کرتی ہے۔

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("اسمارٹ فون Model X")
        .font(.headline)
    HStack(spacing: 8) {
        Text("$999")
            .font(.title2)
            .bold()
        Spacer()
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.7")
    }
}
.padding()

اس مثال میں، VStack ایک ZStack (تصویر ڈسکاؤنٹ بیج کے ساتھ)، ایک پروڈکٹ کا نام اور ایک HStack (قیمت + ریٹنگ) کو یکجا کرتا ہے۔ ZStack «-20%» بیج کو اوپر دائیں کونے میں رکھنے کے لیے alignment .topTrailing استعمال کرتا ہے۔ HStack میں Spacer قیمت کو بائیں کنارے اور ریٹنگ کو دائیں کنارے پر دھکیلتا ہے۔