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

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 স্ট্যাকের চাইল্ড এলিমেন্টের অবস্থানের উপর সম্পূর্ণ নিয়ন্ত্রণ দেয়। 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 উপশিরোনাম এবং বিবরণ বাম প্রান্তে এলাইন করে। নেস্টেড স্ট্যাকের ভিতরে বিভিন্ন alignment-এর সংমিশ্রণ সঠিক লেআউট নিয়ন্ত্রণের অনুমতি দেয়।

নেস্টেড স্ট্যাক: জটিল লেআউট তৈরির উদাহরণ

বাস্তব ইন্টারফেস নেস্টেড 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 মূল্য বাম প্রান্তে এবং রেটিং ডান প্রান্তে ঠেলে দেয়।