Ein erster Blick auf SwiftUI (WWDC 2019 Preview) – Teil 3

Komposition von Views mittels Stacks

Bei der Zusammenstellung von Views mittels SwiftUI spielen Stacks eine maßgebliche Rolle. Es gibt sie in drei Varianten:

  • VStack: Ordnet Views vertikal untereinander an.
  • HStack: Ordnet Views horizontal hintereinander an.
  • ZStack: Ordnet Views hintereinander an, sodass die oberste View auf allen anderen Views des Stacks aufliegt und diese verdeckt.

In diesem Artikel werfen wir ausschließlich einen Blick auf VStack und HStack, wobei das grundlegende Prinzip beim Programmieren sich auch beim ZStack nicht unterscheidet.

Erstellen von VStack und HStack

Basis der Stacks ist ein Closure, das – ähnlich wie die body-Property einer View – ein oder mehrere Views als Content erwartet. Die werden dann unter- oder nebeneinander auf dem Display angeordnet, abhängig davon, ob man einen VStack oder einen HStack nutzt. Beide Elemente lassen sich auch miteinander verschachteln, was es erlaubt, komplexe View-Hierarchien umzusetzen.

Ein Beispiel für solch eine Zusammenstellung von Stacks findet ihr im folgenden Listing. Darin wird eine View auf Basis eines VStack erstellt, also mehrerer Views, die vertikal untereinander angeordnet werden. Die erste View innerhalb dieses VStack ist ein Text, der als Titel formatiert ist.

Die zweite View innerhalb des VStack ist ein HStack. Darin finden sich zwei Views, die somit horizontal nebeneinander angeordnet werden. Die erste View ist ein System-Image, die zweite ein als Untertitel formatierter Text. Das Ergebnis dieses Codes zeigt der nachfolgende Screenshot.

struct ContentView : View {
	var body: some View {
		VStack {
			Text("Title")
				.font(.title)
			HStack {
				Image(systemName: "house.fill")
				Text("Subhead")
					.font(.subheadline)
			}
		}
	}
}
Eine Stack-View inklusive Code und Preview.
Eine Stack-View inklusive Code und Preview.

Wie man sieht ist ein beliebiges Verschachteln von HStack und VStack möglich, was die Basis von View-Kompositionen in SwiftUI darstellt.

Neben dem Closure, das die Inhalte des jeweiligen Stacks enthält, besitzen die Initializer von VStack und HStack auch noch zwei weitere Parameter, die ihr optional anpassen könnt:

  • alignment: Bestimmt die Ausrichtung der Inhalte des Stacks.
  • spacing: Legt den Abstand zwischen den Inhalten des Stacks fest.

Das folgende Listing zeigt eine angepasste Variante des vorangegangenen, in dem diese zusätzlichen Konfigurationsmöglichkeiten der Initializer genutzt werden. Für den VStack wird so als alignment der Wert leading festgelegt (wodurch sich der Text nicht mehr zentriert ausrichtet, sondern am linken Rand) sowie ein Spacing von 20 Punkten. Für den HStack wird nur ein alternatives Spacing von 15 Punkten definiert.

struct ContentView : View {
	var body: some View {
		VStack(alignment: .leading, spacing: 20) {
			Text("Title")
				.font(.title)
			HStack(spacing: 15) {
				Image(systemName: "house.fill")
				Text("Subhead")
					.font(.subheadline)
			}
		}
	}
}

Fazit

Statt Auto Layout setzt SwiftUI voll auf Stacks, die sich um die komplexen Aufgaben und Berechnungen für die passende Positionierung kümmern. Das ist durchaus löblich und dürfte uns Entwicklern insgesamt das Leben sehr erleichtern, allerdings bleibt noch abzuwarten, wie gut sich dieses Stacking auch in komplexen Views mit verschiedenen Funktionen und in Kombination mit Binding tatsächlich nutzen lässt. Bisweilen hinterlässt SwiftUI bei umfangreichen View-Kompositionen nämlich einen etwas überfrachteten und unordentlichen Eindruck, der darauf basierenden Code nicht unbedingt gut und übersichtlich lesbar macht.

Nichtsdestotrotz ist die Arbeit mit SwiftUI weiterhin sehr beeindruckend und der Fokus auf Stacks macht das Komponieren von Views an sich deutlich leichter und angenehmer.

Euer Thomas


Kommentare

5 Antworten zu „Ein erster Blick auf SwiftUI (WWDC 2019 Preview) – Teil 3“

  1. Avatar von Sergio
    Sergio

    Ich habe gelesen, dass Stacks nur 9-10 Elemente enthalten können.

    Stimmt das ? Man empfiehlte deshalb Groups für viele Elemente stattdessen zu benutzen.

    1. Dass Stacks nur 9 bis 10 Elemente enthalten können ist mir neu, bei einem kurzen Test konnte ich das auch nicht nachvollziehen (darin habe ich insgesamt zwölf Stacks ineinander verschachtelt, das Projekt wurde kompiliert und die View korrekt angezeigt). Auch die Dokumentation von SwiftUI gibt (bisher) keinen Aufschluss über eine solche mögliche Einschränkung.

      „Group“ werden wir uns darüber hinaus aber so oder so in deinem der kommenden Artikel ebenfalls noch näher ansehen. 🙂

        1. Ah jetzt verstehe ich, besten Dank für den Link! Das habe ich so tatsächlich noch nicht getestet, ich lag falsch und dachte es ging um die Verschachtelung mehrerer Stacks ineinander (das war es, was ich im Zusammenhang mit meinem letzten Kommentar auch getestet habe).

          Damit ist das definitiv ein Punkt, den ich zum kommenden Artikel zu Groups mit aufnehmen werde; danke dafür! 😉

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert