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)

Czym jest @EnvironmentObject?

Ten wrapper służy do wymiany danych między wieloma widokami. Jest to szczególnie przydatne kiedy jeden widok składa się z wielu innych i na przykład do niektórych z nich musimy przekazać jakieś dane.

Przekazywanie danych z jednego widoku do drugiego, aż w końcu trafimy na ten, w którym te dane są potrzebne, staje się męczące. Ten problem rozwiązuje @EnvironmentObject.

Masz także gwarancję, że jeśli dane się zmienią, widok zostanie automatycznie o tym poinformowany.

Aby przejąć dane oznaczone przez @EnvironmentObject, będziesz musiał w widoku, który znajduje się wyżej w hierarchii wywołać metodę environmentObject i przekazać do niej obiekt, którym chcesz się dzielić z innymi widokami.

Najlepiej wszystko zobrazuje poniższy przykład.

Przykład

Mamy jeden model o nazwie Counter.

Trzy widoki w takiej hierarchii: ContentView -> InformationView -> CounterLabelView.

Widok CounterLabelView potrzebuje mieć dostęp do obiektu klasy Counter. Dlatego w tym widoku zostanie użyty @EnvironmentObject, aby przechwycić przesłane dane.

W widoku InformationView niepotrzebny jest obiekt klasy Counter. Zawiera on widok CounterLabelView.

W widoku głównym ContentView wywołujemy metodę environmentObject, żeby przekazać instancję klasy Counter do widoków potomnych.

Model:

import SwiftUI

class Counter: ObservableObject {
    @Published var value: Int = 0
    
    func increment() {
        value += 1
    }
    
    func decrement() {
        value -= 1
    }
    
    func reset() {
        value = 0
    }
}

Pierwszy widok:

import SwiftUI

struct CounterLabelView: View {
    @EnvironmentObject var counter: Counter
    
    var body: some View {
        Text("\(counter.value)")
            .font(.largeTitle)
    }
}

Drugi widok:

import SwiftUI

struct InformationView: View {
    var body: some View {
        VStack {
            CounterLabelView()
            Text("Click '+' to increment counter").padding()
            Text("Click '-' to decrement counter").padding()
        }
    }
}

Główny widok:

import SwiftUI

struct ContentView: View {
    @StateObject var counter = Counter()
    
    var body: some View {
        VStack {
            InformationView()
            HStack {
                Button("+") {
                    counter.increment()
                }.padding()
                
                Button("-") {
                    counter.decrement()
                }.padding()
            }
        }
        .environmentObject(counter)
    }
}

Stan aplikacji w SwiftUI

Żeby sprawdzić, w jakim stanie jest aplikacja, wystarczy użyć zmiennej: scenePhase za pomocą @Environment

Przykład:

import SwiftUI

struct ContentView: View {
    @Environment(\.scenePhase) private var scenePhase
    
    var body: some View {
        VStack {
                Text("App State")
        }
        .onChange(of: scenePhase) {
            print("State: \(scenePhase)")
        }
    }
}

Za pomocą onChange nasłuchiwana jest wartość zmiennej scenePhase. Wystarczy w symulatorze zmienić stan aplikacji i podejrzeć zmianę na konsoli.

Czym jest @Environment?

SwiftUI pozwala widokowi na pobranie informacji o urządzeniu. Na przykład: jaki motyw graficzny ma ustawiony na swoim telefonie: jasny czy ciemny? Jakiego język jest ustawiony na urządzeniu?

Pozyskując takie informacje, możesz wykorzystać je w swojej aplikacji.

Za pobranie informacji systemowych odpowiedzialny jest wrapper: @Environment.

Pełną listę informacji, jakie możesz pobrać znajdziesz w EnvironmentValues

Przykład

import SwiftUI

struct ContentView: View {
    @Environment(\.colorScheme) private var colorScheme
    
    var body: some View {
        VStack {
            Button(colorScheme == .light ? "Light" : "Dark") {
                
            }
            .frame(width: 100, height: 50)
            .foregroundColor(colorScheme == .light ? .white : .black)
            .background(colorScheme == .light ? .black : .white)
        }
    }
}

W tym przykładzie za pomocą @Environment pobierana jest wartość z colorScheme, która zawiera informację, jaki motyw graficzny jest ustawiony w urządzeniu.

Na podstawie tego stylizowany jest odpowiednio przycisk.

Stan aplikacji

Aplikacja napisana pod iOS może być w następującym stanie:

Non-running

Ten stan oznacza, że aplikacja nie jest uruchomiona.

Inactive

Oznacza, ze aplikacja jest uruchomiona na pierwszym planie (ang.: foreground), ale użytkownik nie ma z nią interakcji. Aplikacja w takim stanie nie odbiera zdarzeń.

Program wchodzi w ten stan na krótko przed przejściem do innego stanu na przykład w tryb background.

Przykład: Użytkownika używa aplikacji i chce się przełączyć do innego programu — aplikacja najpierw wchodzi w tryb inactive, a następnie background.

Active

Aplikacja działa na pierwszym planie, użytkownik ma z nią interakcję i odbiera ona zdarzenia.

Background

Aplikacja jest wprawdzie uruchomiona, ale jest "schowana" - działa w tle. Użytkownik nie ma z nią interakcji. Kod aplikacji jest wykonywany.

W ten stan aplikacja przechodzi na przykład, gdy użytkownik przełącza się na inny program.

Suspended

Aplikacja jest uruchomiona w tle, ale jej kod nie jest wykonywany.