Selam! Sizlere iOS ve macOS üzerinde kullanıcı arayüzleri oluşturmaya yönelik bir çerçeve olan 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'dan 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: @Durum @Bağlama @ObservedObject @StateObject @EnvironmentObject Gelişim aşamasında en iyi arkadaşlarınız olacaklar. @Durum 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: @State, struct MyButton: View { @State var buttonColor = Color.blue var body: some View { Button("Press me!") { buttonColor = Color.red } .background(buttonColor) } } @Bağlama 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: @Binding, kodun bir bölümünde depolanan bir değeri kodun başka bir bölümünde kullanmanıza olanak tanır. 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 , değeri ( bulunan) ( 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. @Binding $text'ten ContentView'da metne SecondView'da @ObservedObject özellikleri işaretlemek için kullanılır Bu özellik sarmalayıcı, 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 kullanımına ilişkin kısa bir örnek: @ObservedObject, gözlemlenen ve dış veri değişikliklerine bağlı olarak değişebilecek . ObservableObject protokolüne @ObservedObject 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 userData.name değerini bir metin alanında görüntülüyor ve ekrana çıktısını veriyoruz. @ObservedObject kullanarak UserData tipinde userData adında bir özellik oluşturuyoruz. Kullanıcı özelliği 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. metin alanındaki değeri değiştirdiğinde, name @Published kullanılarak yayınlanıp gözlemlendiğinden, SwiftUI arayüzün ilgili bölümünü otomatik olarak günceller. 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. Not: @StateObject Bu, nesnenin görünüm var olduğu sürece saklandığı ve onunla birlikte yok edildiği anlamına gelir. Genellikle kullanılması, yalnızca bir görünüm için değil, birden görünüm için gerekli olan sınıf nesneleri için daha pratiktir Örneğin: @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. @StateObject'in çok . 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 , birden çok görünümde kullanılabilecek çeşitli özellikleri içeren bir sınıfın nesnesidir. Sınıf, ve ile kullanılabilmesi için olarak işaretlenmiştir. UserData @StateObject @ObservedObject ObservableObject farklı görünümler arasındaki geçişler arasındaki durumu kaydetmek için kullanarak yeni bir nesnesi oluşturuyoruz. Bu durumda , 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 bağlantı içerir. ContentView'da, @StateObject'i UserData ContentView (ProfileView) , kullanıcı verilerini değiştirmek için kullanarak aynı nesnesine erişim sağlıyoruz. Kullanıcı verileri değiştirdiğinde, aynı nesnesi kullanıldığı için veriler otomatik olarak güncellenir. ProfileView'da @ObservedObject'i UserData UserData ContentView'da 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. Not: 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 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 sahip olabiliriz. Bunun için görevlerin listesini görüntüleyen ayrı bir 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 görünümü oluşturuyoruz. @EnvironmentObject, veri nesnelerini SwiftUI görünüm hiyerarşisi aracılığıyla iletmek için kullanılan bir özellik sarmalayıcıdır. ContentView'a TaskListView AddTaskView nesnesini her üç görünüme de geçirmek için, bunun örneğini oluşturabilir ve ardından bunu hem hem de parametre olarak iletebiliriz. Ancak, daha fazla iç içe görünüm eklemeye karar verirsek, birçok ara görünümden geçirmemiz gerekeceğinden, bu bir sorun haline gelebilir. UserManager ContentView'da TaskListView AddTaskView'a UserManager'ı Bunun yerine, görünüm hiyerarşisinde aşağıya aktarmak için kullanabiliriz. Bu şekilde, erişmesi gereken tüm görünümler, onu basitçe bir olarak ilan edebilir ve gerektiğinde kullanabilir. UserManager'ı @EnvironmentObject'i UserManager'a @EnvironmentObject 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 nesnesi aracılığıyla otomatik olarak ve aktarılacaktır. 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. UserManager @EnvironmentObject TaskListView AddTaskView'e UserManager'ı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.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Read My Stories

Bu ses hikayenin orijinal dilinde üretilmiştir!

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

Çok uzun; Okumak

@tseitlin

Credibility

İLGİLİ ÖYKÜLER