SwiftUI: VStack, HStack, ZStack

Stosy w SwiftUI

Stosy (ang.: stacks) służą do budowania layoutu aplikacji. Możesz je łączyć ze sobą, żeby budować bardziej rozbudowane układy.

Masz do dyspozycji następujące stosy: VStack, HStack, ZStack.

VStack

Stos pionowy (V jako ang.: vertical), który wyświetla elementy z góry na dół.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        VStack {
			Circle()
			    .frame(width: 100, height: 100)
			    .foregroundColor(.red)
								
			Circle()
			    .frame(width: 100, height: 100)
			    .foregroundColor(.green)
								
			Circle()
			    .frame(width: 100, height: 100)
			    .foregroundColor(.blue)
        }
    }
}

HStack

Stos poziomy H jako ang.: horizontal), który wyświetla elementy od lewej do prawej strony.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        HStack {
			Circle()
			    .frame(width: 100, height: 100)
			    .foregroundColor(.red)
								
			Circle()
			    .frame(width: 100, height: 100)
			    .foregroundColor(.green)
								
			Circle()
			    .frame(width: 100, height: 100)
			    .foregroundColor(.blue)
        }
    }
}

ZStack

Stos głębi, który wyświetla elementy, w kolejności od początku do końca. Na przykład mając trzy elementy, które są takich samych rozmiarów, ten ostatni zostanie wyświetlony jako widoczny, a resztę przykryje.

import SwiftUI

struct ContentView: View {
   
    var body: some View {
        ZStack {
            Circle()
                .frame(width: 300, height: 300)
                .foregroundColor(.green)
           
            Circle()
                .frame(width: 200, height: 200)
                .foregroundColor(.blue)
           
            Circle()
                .frame(width: 100, height: 100)
                .foregroundColor(.red)
           
            Text("Hi!")
                .font(.largeTitle)
        }
    }
}

Właściwości stosu

Stos daje także możliwość na sposób wyświetlania elementów poprzez wyrównanie (ang.: alignment) oraz na ustawienie odstępów między elementami (ang.: spacing).

Wyrównanie

Jeśli chodzi o wyrównanie, użyj właściwości: alignment.

Przy czym, każdy stos przyjmuje własne wartości:

Dla VStack:

1. .leading — wyrówanie do lewej
2. .center — wyrównanie do środka (domyślna wartość)
3. .trailing — wyrównanie do prawej

VStack(alignment: .leading)

Dla HStack:

1. .top — umieszcza elementy na górze stosu
2. .bottom — umieszcza elementy na dole stosu
3. .center — umieszcza elementy na środku

HStack(alignment: .leading)

Dla ZStack:

1. Przyjmuje takie same wartości jak dla VStack i HStack, np: leading lub top
2. Lub kombinacje: topLeading, topTrailing, bottomLeading, bottomTrailing

Odstęp

Żeby ustawić odpowiedni odstęp między elementami stosu, użyj właściwości: spacing.

VStack(spacing: 50)