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 تراز عمودی عناصر با ارتفاع متفاوت را مدیریت می‌کند. Alignment در VStack تراز افقی را مدیریت می‌کند. 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 زیرعنوان و توضیحات را به لبه چپ تراز می‌کند. ترکیب alignment مختلف در داخل استک‌های تودرتو امکان کنترل دقیق چیدمان را فراهم می‌کند.

استک‌های تودرتو: مثال‌هایی از ساخت چیدمان‌های پیچیده

رابط‌های واقعی با ترکیب HStack، VStack و ZStack تودرتو ساخته می‌شوند. کارت محصول — یک مثال معمول: VStack بیرونی شامل تصویر (ZStack با روکش)، عنوان (Text)، امتیاز (HStack) و قیمت است. به گزارش Apple Sample Projects (2025)، عمق تودرتویی استک‌ها به ندرت از ۴ سطح بیشتر می‌شود — تودرتویی عمیق‌تر خوانایی کد و عملکرد را کاهش می‌دهد.

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

در این مثال VStack شامل ZStack (تصویر با نشان تخفیف)، نام محصول و HStack (قیمت + امتیاز) است. ZStack از alignment .topTrailing برای قرار دادن نشان «-20%» در گوشه بالا سمت راست استفاده می‌کند. Spacer در HStack قیمت را به لبه چپ و امتیاز را به لبه راست می‌چسباند.