Stacks

Das Problem: Mehr als eine View

Bisher hast du meistens eine einzelne View gestaltet. Echte Bildschirme bestehen aber aus vielen Elementen: Ein Profilbild neben einem Namen, darunter untereinander mehrere Infos, und auf dem Bild übereinander ein kleines Abzeichen.

In SwiftUI gibt es dafür drei Grundbausteine, die Stacks (Stapel):

Mit diesen dreien und etwas Verschachtelung lässt sich erstaunlich viel bauen.

VStack: Untereinander

VStack {
    Text("Erste Zeile")
    Text("Zweite Zeile")
    Text("Dritte Zeile")
}

Die Views werden von oben nach unten angeordnet, in der Reihenfolge, in der sie im Code stehen. Den VStack kennst du seit Lektion 0.4.

Abstand und Ausrichtung

Ein Stack hat zwei wichtige Parameter:

VStack(alignment: .leading, spacing: 12) {
    Text("Anna Berger")
        .font(.headline)
    Text("iOS-Entwicklerin")
        .foregroundStyle(.secondary)
    Text("Wien")
        .font(.footnote)
}

• spacing: der Abstand zwischen den Elementen in Punkten. Ohne Angabe wählt SwiftUI einen passenden Standardabstand.
• alignment: wie die Elemente quer zur Stapelrichtung ausgerichtet werden. Beim VStack also horizontal: .leading (links), .center (Standard) oder .trailing (rechts).

HStack: Nebeneinander

HStack(spacing: 16) {
    Image(systemName: "person.circle.fill")
        .font(.largeTitle)
    Text("Anna Berger")
}

Hier funktioniert alignment vertikal: .top, .center (Standard), .bottom und, besonders praktisch, .firstTextBaseline:

HStack(alignment: .firstTextBaseline) {
    Text("42")
        .font(.largeTitle)
    Text("Punkte")
        .font(.caption)
}

Mit .firstTextBaseline stehen beide Texte auf derselben Grundlinie, wie Wörter in einem Satz, obwohl sie unterschiedlich groß sind. Mit .center wäre „Punkte“ in der Mitte der großen Zahl, was meist unruhig aussieht.

ZStack: Übereinander

ZStack {
    Circle()
        .fill(.blue)
        .frame(width: 100, height: 100)
    Text("AB")
        .font(.title)
        .foregroundStyle(.white)
}

Im ZStack liegt das zuerst geschriebene Element ganz hinten, jedes weitere davor. Hier liegt also der Text auf dem Kreis.

Auch der ZStack hat ein alignment, und zwar in beide Richtungen: .topLeading, .top, .topTrailing, .leading, .center, .trailing, .bottomLeading, .bottom, .bottomTrailing.

ZStack(alignment: .bottomTrailing) {
    Image(systemName: "envelope.fill")
        .font(.system(size: 60))
    Text("3")
        .font(.caption)
        .bold()
        .foregroundStyle(.white)
        .padding(6)
        .background(.red)
        .clipShape(.circle)
}

Spacer: Platz verteilen

Ein Spacer ist eine unsichtbare View, die so viel Platz wie möglich einnimmt. Damit schiebst du Elemente auseinander:

HStack {
    Text("Links")
    Spacer()
    Text("Rechts")
}
.padding()

Der Spacer nimmt den ganzen freien Platz zwischen den beiden Texten ein, und sie landen am linken und rechten Rand.

Mit Spacern kannst du Elemente gezielt positionieren:

HStack {
    Spacer()
    Text("Ganz rechts")
}

VStack {
    Text("Oben")
    Spacer()
    Text("Unten")
}

Mehrere Spacer teilen sich den Platz gleichmäßig:

HStack {
    Spacer()
    Text("A")
    Spacer()
    Text("B")
    Spacer()
}

Spacer(minLength: 20) garantiert dabei einen Mindestabstand.

Divider: Trennlinien

VStack {
    Text("Abschnitt 1")
    Divider()
    Text("Abschnitt 2")
}

Ein Divider zeichnet eine feine Linie, im VStack waagrecht und im HStack senkrecht.

Stacks verschachteln

Die eigentliche Stärke entsteht, wenn du Stacks ineinander steckst. Eine typische Kontaktzeile:

HStack(spacing: 12) {
    Image(systemName: "person.circle.fill")
        .font(.system(size: 44))
        .foregroundStyle(.blue)

    VStack(alignment: .leading, spacing: 2) {
        Text("Anna Berger")
            .font(.headline)
        Text("Zuletzt online vor 5 Min.")
            .font(.subheadline)
            .foregroundStyle(.secondary)
    }

    Spacer()

    Image(systemName: "phone.fill")
        .foregroundStyle(.green)
}
.padding()

Lies es von außen nach innen: Eine waagrechte Reihe aus Bild, einem senkrechten Block mit zwei Texten, Leerraum und einem Symbol.

Wie Stacks ihren Platz verteilen

Dieser Teil ist am Anfang etwas abstrakt, erklärt aber viele Überraschungen. SwiftUI verteilt Platz in drei Schritten:

1. Die Eltern-View schlägt ihrem Kind eine Größe vor: „Du hast 390 × 800 Punkte.“
2. Das Kind entscheidet selbst, wie groß es sein will: Ein Text braucht nur so viel Platz wie seine Buchstaben. Ein Spacer und eine Farbe nehmen alles, was sie bekommen.
3. Die Eltern-View platziert das Kind entsprechend ihrer Ausrichtung.

Ein Stack verteilt den Platz unter seinen Kindern. Wer flexibel ist, wie Spacer oder Color, bekommt den Rest, nachdem die anderen versorgt sind.

Das erklärt zum Beispiel:

VStack {
    Color.blue
    Text("Hallo")
}

Die blaue Fläche füllt fast den ganzen Bildschirm, denn eine Farbe nimmt so viel Platz, wie sie bekommt. Der Text nimmt nur, was er braucht.

Typische Fehler

Ausrichtung ohne Wirkung

VStack(alignment: .leading) {
    Text("Kurz")
}

Der Text steht trotzdem in der Mitte des Bildschirms. alignment richtet nur innerhalb des Stacks aus, und der Stack ist hier nur so breit wie der Text. Lösung in der nächsten Lektion: .frame(maxWidth: .infinity, alignment: .leading).

Spacer im falschen Stack

VStack {
    Text("A")
    Spacer()
    Text("B")
}

Wolltest du A und B nebeneinander mit Abstand? Dann gehört der Spacer in einen HStack. Ein Spacer drückt immer in Richtung seines Stacks.

Zu viele Elemente

Ein Stack kann theoretisch beliebig viele Views enthalten. Bei sehr vielen Elementen, etwa 1.000 Zeilen, solltest du aber eine List (Lektion 2.15) oder einen LazyVStack (Lektion 3.18) verwenden, die nur den sichtbaren Teil erzeugen.

Unerwartete Reihenfolge im ZStack

Ein Element verschwindet? Im ZStack liegt es vielleicht hinter einem größeren Element. Denk daran: Was zuerst geschrieben wird, liegt hinten.

FAQ

Übungen

HStack {
    Text("Montag")
    Spacer()
    Image(systemName: "cloud.sun.fill")
        .symbolRenderingMode(.multicolor)
    Spacer()
    Text("18 °C")
}
.padding()

HStack(spacing: 12) {
    VStack {
        Text("128").font(.title2).bold()
        Text("Beiträge").font(.caption).foregroundStyle(.secondary)
    }
    .padding()
    .background(Color(.secondarySystemBackground))
    .clipShape(.rect(cornerRadius: 12))

    VStack {
        Text("4.200").font(.title2).bold()
        Text("Follower").font(.caption).foregroundStyle(.secondary)
    }
    .padding()
    .background(Color(.secondarySystemBackground))
    .clipShape(.rect(cornerRadius: 12))

    VStack {
        Text("312").font(.title2).bold()
        Text("folge ich").font(.caption).foregroundStyle(.secondary)
    }
    .padding()
    .background(Color(.secondarySystemBackground))
    .clipShape(.rect(cornerRadius: 12))
}

RoundedRectangle(cornerRadius: 14)
    .fill(.blue.gradient)
    .frame(width: 60, height: 60)
    .overlay {
        Image(systemName: "envelope.fill")
            .font(.title)
            .foregroundStyle(.white)
    }
    .overlay(alignment: .topTrailing) {
        Text("5")
            .font(.caption)
            .bold()
            .foregroundStyle(.white)
            .padding(6)
            .background(.red)
            .clipShape(.circle)
            .offset(x: 8, y: -8)
    }

Zusammenfassung

• VStack ordnet untereinander, HStack nebeneinander, ZStack übereinander an.
• spacing steuert den Abstand zwischen den Elementen, alignment die Ausrichtung quer zur Stapelrichtung.
• Im ZStack liegt das zuerst geschriebene Element hinten.
• Spacer nimmt allen freien Platz und schiebt Elemente auseinander. Divider zeichnet Trennlinien.
• Komplexe Layouts entstehen durch Verschachteln.
• Eltern schlagen eine Größe vor, Kinder entscheiden selbst, Eltern platzieren.

Spickzettel

VStack(alignment: .leading, spacing: 8) { ... }
HStack(alignment: .firstTextBaseline, spacing: 12) { ... }
ZStack(alignment: .bottomTrailing) { ... }
Spacer()   Spacer(minLength: 20)   Divider()

HStack {
    Image(...)
    VStack(alignment: .leading) { Text(...); Text(...) }
    Spacer()
    Image(...)
}
.overlay(alignment: .topTrailing) { Badge() }