SwiftUI'nin 5 Ana Özellik Paketleyicisi ve Bunların Etkili Bir Şekilde Kullanılması

Selam! Sizlere iOS ve macOS üzerinde kullanıcı arayüzleri oluşturmaya yönelik bir çerçeve olan SwiftUI'dan bahsetmek istiyorum. Programlamaya bildirimsel bir yaklaşım kullandığı için kullanımı çok uygundur. SwiftUI ile arayüzünüzün ne yapması ve nasıl görünmesi gerektiğini tanımlayabilirsiniz; gerisini çerçeve halledecektir.

SwiftUI'nin temel unsurlarından biri özellik sarmalayıcıların kullanılmasıdır. Bunlar, özellikler için ek mantık sağlamanıza olanak tanıyan işlevsel öğelerdir.

SwiftUI'nin beş ana özellik sarmalayıcısı vardır:

1. @Durum

2. @Bağlama

3. @ObservedObject

4. @StateObject

5. @EnvironmentObject

   
   

Gelişim aşamasında en iyi arkadaşlarınız olacaklar.

@Durum

@State, değiştirilebilecek özellikler oluşturmanıza ve gerekirse bu değişikliklere göre arayüzü güncellemenize olanak tanır. Örneğin, basıldığında rengi değişen bir düğme oluşturmak istiyorsanız, rengi depolamak ve düğmeye eklemek için bir @State değişkeni oluşturabilirsiniz:

 struct MyButton: View { @State var buttonColor = Color.blue var body: some View { Button("Press me!") { buttonColor = Color.red } .background(buttonColor) } }

@Bağlama

@Binding, kodun bir bölümünde depolanan bir değeri kodun başka bir bölümünde kullanmanıza olanak tanır. Genellikle SwiftUI'da bir değeri bir görünümden diğerine aktarmak ve bunların birbirleriyle etkileşime girmesine olanak sağlamak için kullanılır. Örneğin, biri metin alanına sahip, diğeri düğmeli olmak üzere iki görünümümüz olduğunu hayal edin. Kullanıcı butona bastığında metin alanının güncellenmesini istiyoruz. Bunu yapmak için @Binding'i kullanabiliriz:

 struct ContentView: View { @State private var text = "" var body: some View { VStack { TextField("Enter text", text: $text) Button("Update text") { text = "New text" } SecondView(text: $text) } } } struct SecondView: View { @Binding var text: String var body: some View { Text(text) } }

Bu örnekte @Binding , değeri $text'ten ( ContentView'da bulunan) metne ( SecondView'da bulunan) geçirmek için kullanılır, böylece kullanıcı düğmeye bastığında metin alanı güncellenir ve yeni metni görüntüler.

@ObservedObject

@ObservedObject, gözlemlenen ve dış veri değişikliklerine bağlı olarak değişebilecek özellikleri işaretlemek için kullanılır . Bu özellik sarmalayıcı, ObservableObject protokolüne uygun olan nesnedeki değişikliklere abone olur ve veriler değiştiyse arayüzün ilgili bölümlerini otomatik olarak günceller. İşte @ObservedObject kullanımına ilişkin kısa bir örnek:

 class UserData: ObservableObject { @Published var name = "John" } struct ContentView: View { @ObservedObject var userData = UserData() var body: some View { VStack { Text("Hello, \(userData.name)!") TextField("Enter your name", text: $userData.name) } } }

Bu örnekte, @Published adını içeren UserData adında bir sınıf oluşturuyoruz. ContentView yapısında @ObservedObject kullanarak UserData tipinde userData adında bir özellik oluşturuyoruz. userData.name değerini bir metin alanında görüntülüyor ve ekrana çıktısını veriyoruz.

Kullanıcı metin alanındaki değeri değiştirdiğinde, name özelliği @Published kullanılarak yayınlanıp gözlemlendiğinden, SwiftUI arayüzün ilgili bölümünü otomatik olarak günceller. Bu, arayüzü güncellemek için kendi kodumuza ihtiyacımız olmadığı ve SwiftUI'nin bunu bizim için yapmasına izin verdiğimiz anlamına gelir.

Not: Bilmiyorsanız @Published, Combine çerçevesinden bir sınıf veya yapı özelliğine eklenebilen ve o özelliğin değerindeki değişikliklere ilişkin bildirimleri o özelliğe abone olan herkese otomatik olarak gönderen bir özellik sarmalayıcıdır. . Başka bir deyişle, değişiklikler açısından izlenebilecek özellikler için yardımcı bir özelliktir.

@StateObject

@StateObject, bir sınıf nesnesini başlatmak ve onu SwiftUI'deki görünüm durumunda saklamak için kullanılan bir özellik sarmalayıcıdır. Bu, nesnenin görünüm var olduğu sürece saklandığı ve onunla birlikte yok edildiği anlamına gelir. Genellikle @StateObject'in kullanılması, yalnızca bir görünüm için değil, birden çok görünüm için gerekli olan sınıf nesneleri için daha pratiktir . Örneğin:

 class UserData: ObservableObject { @Published var name = "John" @Published var age = 30 } struct ContentView: View { @StateObject var userData = UserData() var body: some View { NavigationView { VStack { Text("Name: \(userData.name)") Text("Age: \(userData.age)") NavigationLink( destination: ProfileView(userData: userData), label: { Text("Edit Profile") }) } .navigationTitle("Home") } } } struct ProfileView: View { @ObservedObject var userData: UserData var body: some View { Form { TextField("Name", text: $userData.name) Stepper("Age: \(userData.age)", value: $userData.age) } .navigationTitle("Profile") } }

Bu örnekte UserData , birden çok görünümde kullanılabilecek çeşitli özellikleri içeren bir sınıfın nesnesidir. Sınıf, @StateObject ve @ObservedObject ile kullanılabilmesi için ObservableObject olarak işaretlenmiştir.

ContentView'da, farklı görünümler arasındaki geçişler arasındaki durumu kaydetmek için @StateObject'i kullanarak yeni bir UserData nesnesi oluşturuyoruz. Bu durumda ContentView , kullanıcı verilerini görüntüler, görselleştirir ve kullanıcı verilerini düzenlemek için kullanılabilecek başka bir görünüme (ProfileView) bağlantı içerir.

ProfileView'da , kullanıcı verilerini değiştirmek için @ObservedObject'i kullanarak aynı UserData nesnesine erişim sağlıyoruz. Kullanıcı verileri değiştirdiğinde, aynı UserData nesnesi kullanıldığı için veriler ContentView'da otomatik olarak güncellenir.

Not: Bir sınıf nesnesindeki değişiklikleri tek bir görünümden gözlemlemeniz gerekiyorsa @ObservedObject'i ve birden fazla görünümün görüntülenmesini etkileyen bir sınıf nesnesinin durumunu kaydetmeniz gerekiyorsa @StateObject'i kullanın.

Birden fazla görünümde ihtiyaç duyulan bir nesne için @StateObject yerine @ObservedObject kullanırsanız, her görünüm nesnenin kendi örneğine sahip olur ve bu da görünümler arasındaki veri senkronizasyonunda sorunlara yol açabilir. Bu nedenle bu durumda @StateObject kullanmak daha iyidir.

@EnvironmentObject

@EnvironmentObject, veri nesnelerini SwiftUI görünüm hiyerarşisi aracılığıyla iletmek için kullanılan bir özellik sarmalayıcıdır. SwiftUI hiyerarşisindeki Ortam kapsayıcısına ait herhangi bir görünümden (örneğin, Sahne, Görünüm, Uygulama vb.) veri nesnesine erişime izin verir. Örneğin, bir görev listesi yönetimi uygulamamız olduğunu düşünün. Görevlerin bir listesini ve yeni görevler oluşturma yeteneğini içeren bir kök ContentView'a sahip olabiliriz. Bunun için görevlerin listesini görüntüleyen ayrı bir TaskListView görünümü ve yeni görevler eklemek için bir düğme oluşturuyoruz. Yeni bir görev ekledikten sonra kullanıcının görev ekleme ekranına yönlendirilmesi gerekiyor, böylece ayrı bir AddTaskView görünümü oluşturuyoruz.

UserManager nesnesini her üç görünüme de geçirmek için, bunun örneğini ContentView'da oluşturabilir ve ardından bunu hem TaskListView hem de AddTaskView'a parametre olarak iletebiliriz. Ancak, daha fazla iç içe görünüm eklemeye karar verirsek, UserManager'ı birçok ara görünümden geçirmemiz gerekeceğinden, bu bir sorun haline gelebilir.

Bunun yerine, UserManager'ı görünüm hiyerarşisinde aşağıya aktarmak için @EnvironmentObject'i kullanabiliriz. Bu şekilde, UserManager'a erişmesi gereken tüm görünümler, onu basitçe bir @EnvironmentObject olarak ilan edebilir ve gerektiğinde kullanabilir.

 struct TaskManagerApp: App { @StateObject var userManager = UserManager() var body: some Scene { WindowGroup { ContentView() .environmentObject(userManager) } } } struct ContentView: View { var body: some View { NavigationView { TaskListView() } } } struct TaskListView: View { @EnvironmentObject var userManager: UserManager var body: some View { List(userManager.tasks) { task in TaskRow(task: task) } .navigationBarTitle("Tasks") .navigationBarItems(trailing: Button(action: { // Navigate to AddTaskView }) { Image(systemName: "plus") } ) } } struct AddTaskView: View { @EnvironmentObject var userManager: UserManager var body: some View { // Add new task using userManager } }

Böylece, artık UserManager nesnesi @EnvironmentObject aracılığıyla otomatik olarak TaskListView ve AddTaskView'e aktarılacaktır. UserManager'ın durumunu bir görünümde değiştirebileceğimizi ve değişikliklerin otomatik olarak diğer görünüme yansıtılacağını unutmayın.

Makale temel SwiftUI özellik paketleyicilerini kapsıyordu: @State, @Binding, @ObservedObject, @StateObject, @EnvironmentObject.

Bu özellik sarmalayıcılar, SwiftUI'de uygulama durumuyla çalışmanın temelini oluşturur. SwiftUI ile uygulamalar geliştirmek için gerekli olan temel özellik paketleyicilerinin parmaklarınızın ucunda olması için bu makaleyi bir yardımcı sayfa olarak kullanın. Bu bilgiyi uygulayarak, dinamik olarak değişen durumlarla daha karmaşık kullanıcı arayüzleri oluşturabilecek ve modellerinizdeki verileri SwiftUI'ye entegre edebileceksiniz.