HStack: ما هو، HStack VStack ZStack في SwiftUI

ما هو HStack في SwiftUI؟

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 يغطي 85% من سيناريوهات التخطيط العمودي في SwiftUI.

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")
    }
}

VStack مع alignment .leading يحاذي جميع الصفوف إلى الحافة اليسرى. داخل 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. Alignment في HStack يتحكم في المحاذاة الرأسية للعناصر ذات الارتفاعات المختلفة. 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 ينشئ فجوة بينهما. VStack المتداخل مع alignment .leading يحاذي العنوان الفرعي والوصف إلى الحافة اليسرى. الجمع بين 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 يستخدم alignment .topTrailing لوضع شارة «-20%» في الزاوية العلوية اليمنى. Spacer في HStack يدفع السعر إلى الحافة اليسرى والتقييم إلى الحافة اليمنى.