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 उपशीर्षक और विवरण को बाएँ किनारे पर एलाइन करता है। नेस्टेड स्टैक के अंदर विभिन्न 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 मूल्य को बाएँ किनारे और रेटिंग को दाएँ किनारे पर धकेलता है।