@State — SwiftUI'da amacı ve kullanımı

SwiftUI'da @State nedir?

@State, SwiftUI'ya yerleşik bir Property Wrapper'dır ve bir view'in kendi durumunu depolamasına ve izlemesine olanak tanır. Bir @State değeri değiştiğinde, SwiftUI body özelliğini yeniden çağırarak view'i otomatik olarak yeniden çizer. Bu, SwiftUI'da tepkisel programlamanın temelidir: geliştirici durumu bildirir ve framework arayüz senkronizasyonunu halleder.

@State, SwiftUI tarafından yönetilen heap'te bir depolama alanı oluşturur. Bu alan kalıcıdır — her render'da meydana gelen view yapısının tekrarlanan başlatmalarından sağ çıkar. SwiftUI, @State özelliğini belirli bir view'e bağlamak için view'in tanımlayıcısını (hiyerarşideki konumundan üretilen) kullanır. Bu sayede, üst view güncellendiğinde durum sıfırlanmaz.

Önemli bir sınırlama: @State yalnızca değer türleri (struct, enum, ilkel türler) içindir. Referans türleri (sınıflar) için @StateObject veya @ObservedObject kullanın. Bir @State özelliğine bir sınıf atarsanız, SwiftUI nesne içindeki değişiklikleri algılayamaz — yalnızca referansın tamamen değiştirilmesini algılar.

@State perde arkasında nasıl çalışır?

SwiftUI, @State'i dahili bir Storage mekanizması aracılığıyla uygular. Her @State özelliği, view'in özel bir depolama kapsayıcısında saklanan adanmış bir bellek hücresi alır. wrappedValue'ya bir yazma gerçekleştiğinde, SwiftUI didSet aracılığıyla bağımlılık grafiğini yeniden çizme gereği konusunda bilgilendirir.

struct ContentView: View {
    @State private var name: String = "User"
    @State private var isLoggedIn: Bool = false

    var body: some View {
        VStack {
            Text("Merhaba, \(name)")
            Button(isLoggedIn ? "Çıkış Yap" : "Giriş Yap") {
                isLoggedIn.toggle()
            }
        }
    }
}

Örnekte iki @State özelliği var: name (String) ve isLoggedIn (Bool). isLoggedIn.toggle() çağrıldığında, SwiftUI ContentView'i güncelleme gerektiriyor olarak işaretler ve sonraki render döngüsünde body'yi yeniden çağırır. Kilit nokta: @State özellikleri her zaman private değiştiricisiyle bildirilir — bu, durumun yalnızca mevcut view'e ait olduğunu ve dışarıdan doğrudan değiştirilmemesi gerektiğini belirtir.

Değişiklikleri gözlemlemek için SwiftUI, Combine'dan CurrentValueSubject kullanır. Her @State özelliği, her değişiklikte sistemi bilgilendiren gizli bir yayıncı oluşturur. Bu, SwiftUI'nin yalnızca minimum gerekli view kümesini yeniden çizmesine ve tam hiyerarşi güncellemelerinden kaçınmasına olanak tanır.

Bir projede @State ne zaman kullanılır

@State, basit yerel durumlar için idealdir: aramadaki metin alanları, modal pencereler için boolean bayraklar, ayar anahtarları, sayaçlar, seçili liste öğeleri. Bir değer yalnızca bir view ve onun alt bileşenlerinde (@Binding aracılığıyla) kullanılıyorsa, @State doğru seçimdir. View kapatıldığında bile kalması gereken durumlar (örneğin, form verileri) için, view hiyerarşide kaldığı sürece @State de çalışır.

• Metin alanları — TextField'a girilen metni depolamak için @State
• Boolean bayraklar — modal pencereleri ve sheet'leri göstermek/gizlemek için @State
• Öğe seçimi — seçili sekme veya satırı izlemek için @State
• Sayaçlar — artırma/azaltma ile sayısal değerler için @State
• Ara hesaplamalar — view içinde sonuçları önbelleğe almak için @State

@State'i global uygulama durumları, ağ verilerini önbelleğe alma veya birden çok ekranda kullanılan nesneler için kullanmayın. @StateObject ve @EnvironmentObject bu amaçlar için tasarlanmıştır. Ayrıca, @State büyük miktarda veri depolamak için uygun değildir — her değişiklik tüm view'i yeniden çizecektir.

@State ve @Binding: birlikte çalışma

@Binding, üst view'deki @State ile bu durumu değiştirmesi gereken alt view arasında bir köprüdür. Üst @State'i bildirir ve alt bileşen $ projeksiyonu aracılığıyla bir Binding alır. Alt view'de Binding'i değiştirmek, üstteki @State'i otomatik olarak günceller — ve bunun tersi de geçerlidir. Bu, geri bildirim yeteneğiyle tek yönlü bir veri akışı sağlar.

struct ParentView: View {
    @State private var text: String = ""

    var body: some View {
        ChildView(text: $text)
    }
}

struct ChildView: View {
    @Binding var text: String

    var body: some View {
        TextField("Enter text", text: $text)
    }
}

Listede, ParentView @State text'e sahiptir ve ChildView $text'i Binding olarak alır. ChildView içindeki TextField, text: $text aracılığıyla bu Binding'e bağlanır. Kullanıcı TextField'a yazdığında, Binding aracılığıyla ChildView'de değer değişir ve ParentView'de @State'in güncellenmesine neden olur. Her iki view de yeni değerle yeniden çizilir.

@State ile çalışırken yaygın hatalar

En yaygın hata, bir @State özelliğine sınıf atamaktır. @State var model = MyClass() yazarsanız, SwiftUI sınıf içindeki özelliklerdeki değişiklikleri izleyemez — yalnızca nesne değişimini algılar. Sınıflar için her zaman @StateObject kullanın. İkinci yaygın sorun, @State'i private değiştiricisi olmadan bildirmektir; bu, durum kapsülleme ilkesini ihlal eder.

@State'i $ olmadan doğrudan alt view'e geçirmek başka bir tipik hatadır. TextField(text: $text) yerine TextField(text: text) geçirirseniz, alt bileşen bir Binding değil, yalnızca bir dize alır. TextField'deki metin değişiklikleri üstün @State'i ile senkronize edilmez. Binding geçirmek için her zaman $ projeksiyonunu kullanın.

Üçüncü hata, ilgili veriler için birden çok @State özelliği kullanmaktır. Birden çok değer mantıksal olarak tek bir bütün oluşturuyorsa (örneğin, form alanları), bunları tek bir @State ile tek bir yapıda birleştirin. Bu, durumu alt view'lere geçirmeyi basitleştirir ve bireysel güncelleme tetikleyicilerinin sayısını azaltır.

SwiftUI'da @State kullanım örnekleri

@State, çoğu SwiftUI projesinde temel etkileşim için kullanılır. @State'in metin alanlarını ve yükleme durumunu yönettiği bir giriş formu örneğini ele alalım. Bu desen, basit notlardan karmaşık kurumsal çözümlere kadar her uygulamada görülür.

struct LoginView: View {
    @State private var email: String = ""
    @State private var password: String = ""
    @State private var isLoading: Bool = false
    @State private var errorMessage: String?

    var body: some View {
        Form {
            TextField("Email", text: $email)
            SecureField("Password", text: $password)
            Button("Giriş Yap") {
                login()
            }.disabled(isLoading)
        }
    }

    private func login() {
        isLoading = true
        // Ağ isteği gerçekleştir
    }
}

Örnekte dört @State özelliği var: form alanları için email ve password, yükleme göstergesi için isLoading ve hataları görüntülemek için errorMessage. Her özellik bağımsız olarak arayüzünün bir kısmını yönetir. isLoading değiştiğinde, düğme disabled(isLoading) aracılığıyla otomatik olarak devre dışı bırakılır — manuel UI güncellemesi olmadan.