İçeriğe geç

SwiftUI ile @ObservedObject kullanımı

Merhabalar bu yazımda SwiftUI ile birlikte kullandığımız @ObservedObject ön eki alan değişkenlerin ne işe yaradığını ve ne için kullanmamız gerektiğini sizlerle paylaşacağım.

@ObservedObject ile Sayfanız içerisinde yapacağınız değişimleri otomatik olarak tetikleyerek, diğer sayfalara taşıyabilir ve taşınan sayfada yapılan değişiklikler bir önceki sayfa üzerindede update edilmiş olur. SwiftUI ile Uygulama içerisinde çokça kullancağımız bir yapıdır.

Apple tarafından UIKit ile MVC tasarım deseni yönlenimi varken SwiftUI ile MVVM tasarım desenine yönelim yapılmıştır. Bahsettiğim bu yapıda View Model kısmı sınıflarınızı ObservableObject olarak tanımlayıp içerisinde gerekli değişken ve model ile bağlantılarınızı gerçekleştirebilir ve bunları otomatik olarak UI update edilerek kullanabilirsiniz.

Aşağıda ilk örneğimi sizlerle paylaşayım.

struct ContentView:View {

    @ObservedObject var VM = ContentViewModel()

    var body: some View {
        VStack {
            Rectangle()
                .frame(width: 150, height: 50, alignment: .center)
                .foregroundColor(VM.isActive ? .green : .gray)
                .cornerRadius(20)
                .padding()
            Button(action: {
                self.VM.isActive.toggle()
            }) {
                Text("Click")
            }
        }
    }
}
class ContentViewModel: ObservableObject {

    var didChange = PassthroughSubject<ContentViewModel, Never>()

    @Published var isActive:Bool = false {
        didSet {
            didChange.send(self)
        }
    }
}

Burada VM sınıfımız içerisinde kullandığımız yapı ile otomatik olarak isActive değişkeninin değişimi ile update işlemi gerçekleşmiş olur. Yani farklı sayfalarda bile isActive üzerinde yaptığınız değişiklik, diğer sayfalardada otomatik olarak değişir ve UI update edilir. PassthroughSubject sınıfı ve kullanımını daha önceki Combine framework yazımda bahsetmiştim.

Bunun dışında basit bir model kullanarak kullanıcı ismini diğer bir sayfaya taşıyıp, orada update etme örneğimi sizlerle paylaşayım.

Basit bir model oluşturalım.

struct UserModel: Identifiable {
    var id:UUID
    var name:String
    var gender:String
}

Bu modelimizi kullanacağımız bir ObservableObject sınıfı oluşturalım.

class UserStore: ObservableObject {

    @Published var users:[UserModel] = []

    func fetch() {
        users = [
            UserModel(id: .init(), name: "Kenan", gender: "M"),
            UserModel(id: .init(), name: "Mike", gender: "M"),
            UserModel(id: .init(), name: "Lucy", gender: "F"),
            UserModel(id: .init(), name: "Mia", gender: "F")
        ]
    }
}

Daha sonrasında bu modeli ilk sayfamıza bağlayarak verileri listeleyelim.

struct ContentView:View {

    @ObservedObject var VM:UserStore = UserStore()

    var body: some View {
        NavigationView {
            List {
                ForEach(VM.users.indices) { i in
                    NavigationLink(destination: UserDetailView(user: self.$VM.users[i])) {
                        VStack(alignment: .leading) {
                            Text(self.VM.users[i].name)
                                .font(.headline)
                            Text("Gender: \(self.VM.users[i].gender)")
                                .font(.subheadline)
                                .foregroundColor(.secondary)
                        }
                    }
                }
            }
            .navigationBarTitle(Text("Users"))
        }
        .onAppear(perform: VM.fetch)
    }
}

Daha önceki yazılarımda bahsettiğim NavigationLink ile diğer bir sayfaya push olup, Binding<UserModel> tipindeki nesnemizi taşıyalım.

struct UserDetailView:View {

    @Environment(\.presentationMode) var presentation
    @Binding var user: UserModel

    var body: some View {
        VStack {
            TextField("Name", text: $user.name)
            Section {
                Button(action: {
                    self.presentation.wrappedValue.dismiss()
                }) {
                    Text("Save")
                }
            }
        }
    }
}

Bu sayfada $user.name üzerinde yaptığımız değişiklikler direkt olarak ilk sayfayada yansımış olur.

Tarih:SwiftUI

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Copyright © 2021 Kenan Atmaca