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), το βάθος ένθεσης στοιβών σπάνια υπερβαίνει τα 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("Smartphone 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 απωθεί την τιμή προς την αριστερή άκρη και τη βαθμολογία προς τη δεξιά άκρη.