Marcin Jaroszyński blog

SwiftUI: Do czego służy @StateObject?

Opublikowano: 06.01.2024 - tagi: SwiftUI Swift Widok Stan Protokół

Czym jest @StateObject?

Klasy w Swift są typami referencyjnymi. Jeśli potrzebujesz w swoim widoku mieć właściwość, która jest obiektem klasy powinieneś oznaczyć go jako @StateObject.

Właściwość oznaczona jako @StateObject sprawia, że ten obiekt będzie obserwowany. A właściwie to stan obiektu. Kiedy stan obiektu się zmieni, widok zostanie zaktualizowany. Dodatkowo używając tego wrappera, informujesz w ten sposób, że widok jest właścicielem tego obiektu.

Używając @StateObject masz pewność obiekt nie zostanie zniszczony, kiedy widok jest aktualizowany.

Obiekt, który jest oznaczony jako @StateObject musi być zgodny z protokołem ObservableObject.

class MyClass: ObservableObject {
	...
}

Dzięki temu informujesz SwiftUI o ewentualnej zmianie stanu obiektu tej klasy w wyniku czego widok zostanie przerysowany.

To jeszcze nie wszystko. Potrzebujesz oznaczyć właściwość klasy jako @Published:

class MyClass: ObservableObject {
	@Published var value = 0
}

Za pomocą @Published wskazujesz konkretnie, które właściwości klasy mają być monitorowane.

Przykład

Model:

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

Widok:

struct ContentView: View {
    @StateObject private var counter = Counter(value: 0)
    
    var body: some View {
        VStack {
            Text("\(counter.value)")
                .font(.largeTitle)
            HStack {
                Button("+") {
                    counter.increment()
                }.padding()
                
                Button("-") {
                    counter.decrement()
                }.padding()
            }
            
            Button("RESET") {
                counter.reset()
            }
        }
    }
}

#Preview {
    ContentView()
}

Tworzenie obiektu w init

Patrząc na powyższy przykład, załóżmy, że potrzebujesz w widoku ContentView stworzyć instancję klasy Counter w funkcji init ContentView. Bo na przykład nie wiesz, jaka ma być wartość początkowa.

Jak można to zrobić?

Może tak?:

struct ContentView: View {
    @StateObject private var counter: Counter
    
    init(counter: Int) {
        counter = Counter(value: counter)
    }
}

#Preview {
    ContentView(counter: 7)    
}

Niestety nie. Edytor zgłosi błąd.

Można to jednak obejść:

struct ContentView: View {
    @StateObject private var counter: Counter
    
    init(counter: Int) {
        _counter = StateObject(wrappedValue: Counter(value: counter))
    }
}

#Preview {
    ContentView(counter: 7)    
}

SwiftUI: Do czego służy @Binding?

Opublikowano: 04.01.2024 - tagi: SwiftUI Swift Widok Stan

Czym jest @Binding?

W SwiftUI możesz łatwo tworzyć aplikacje za pomocą kilku widoków. Jeden widok może składać się z kilku innych.

W niektórych przypadkach będzie potrzeba dzielenia się danymi między widokiem: rodzic a widokiem: dziecko. Ale to nie wszystko. Może być taka potrzeba, że wartość przekazana między widokami powinna być modyfikowana przez oba widoki, a ewentualne zmiany, powinny być widoczne w obu widokach.

Można to ująć krócej: @Binding pozwala na stworzenie komunikacji dwukierunkowej między widokami.

Użycie @Binding idzie w parze z użyciem @State. @State używasz w widoku rodzica, a @Binding w widoku dziecka.

Przykład

Pierwszy widok:

import SwiftUI

struct CounterView: View {
    @Binding var counter: Int
    
    var body: some View {
        VStack {
            Text("\(counter)")
                .font(.largeTitle)
            HStack {
                Button("+") {
                    counter += 1
                }.padding()
                
                Button("-") {
                    counter -= 1
                }.padding()
            }
        }
    }
}

Za pomocą @Binding jest tworzone wiązanie dwukierunkowe między widokami.

Drugi widok:

import SwiftUI

struct ContentView: View {
    @State private var counter: Int = 0
		
    var body: some View {
        VStack {
            CounterView(counter: $counter).padding()
            Button("RESET") {
                counter = 0
            }
        }
    }
}

#Preview {
    ContentView()
}

Zmienna counter przekazywana jest do widoku CounterView. Ponieważ ten widok, jako parametr przyjmuje wiązanie, musisz użyć znaku dolara: $counter.

Kiedy stan zmiennej counter zostanie zmieniony w widoku CounterView będzie to widoczne także w widoku rodzica (ContentView).

Wartość licznika można też zmienić w ContentView i ta zmiana także zostanie przekazana do widoku dziecka (CounterView).

Preview i @Binding

Zakładając, że widok przyjmuje parametr jako @Binding, jak należy przekazać wartość w Preview?

Nie możesz zrobić tak:

#Preview {
	CounterView(arg: 0)
}

Zostanie zgłoszony błąd!

Żeby rozwiązać ten problem, możesz:

a) Użyć Binding.constant. Tworzy ona wiązanie z niezmienną wartością.

#Preview {
	CounterView(arg: .constant(10))
}

Problem z tym rozwiązaniem jest taki, że nie możesz zmienić wartości przekazanej jako constant w widoku.

Możesz to obejść za pomocą drugiego sposobu:

b) Przekazać wartość w zmiennej/stałej używając znaku dolara: $:

#Preview {
    struct PreviewWrapper: View {
        @State var counter: Int = 1
            
        var body: some View {
            CounterView(counter: $counter)
        }
    }
    return PreviewWrapper()
}

SwiftUI: Do czego służy @State?

Opublikowano: 02.01.2024 - tagi: SwiftUI Swift Widok Stan

Czym jest @State?

W SwiftUI widoki są tworzone za pomocą struktur. Struktury w Swift domyślnie są niezmienne (ang.: immutable). Dzięki @State możesz określić, która właściwość będzie mogła zmienić stan widoku.

Używa się tego do właściwości widoku:

struct SomeView: View {
	@State private someProperty: String = ""
}

Kiedy oznaczysz jakąś właściwość jako @State, informujesz w ten sposób SwiftUI, że ma ona być nasłuchiwana i przy każdej zmianie wartości widok ma być odświeżony.

@State powinno się używać dla typów prostych jak: stringi, liczby lub tablice.

Przykład

import SwiftUI

struct ContentView: View {
    @State private var counter: Int = 0
    var body: some View {
        VStack {
            Text("\(counter)")
                .font(.largeTitle)
            HStack {
                Button("+") {
                    counter += 1
                }
                
                Button("-") {
                    counter -= 1
                }
            }
        }
    }
}

Podsumowanie: Grudzień 2023

Opublikowano: 31.12.2023 - tagi: Blog Podsumowanie Grudzień 2023

W grudniu opublikowałem 3 wpisy:

React:

React Testing Library: Klawiatura

Swift:

Swift: Enumeracje

Blog:

Podsumowanie 2023 roku

Przeczytałem trzy książki:

Prawdziwe tygrysy — Mick Herron
Ulica szpiegów — Mick Herron
Londyńskie zasady — Mick Herron

Przesłuchałem dziewięć audiobooków:

Elantris — Brandon Sanderson
Gra w kości — Elżbieta Cherezińska
Splot słoneczny — Tomasz Jastrun
W ciemnej dolinie. Rodzinna tragedia i tajemnica schizofrenii — Robert Kolker
Zima naszej goryczy — John Steinbeck
Rzeźnia numer pięć — Kurt Vonnegut
Mógłby spaść śnieg — Jessica Au
Planeta małp — Pierre Boulle
Głód — Jozef Karika