SwiftUI: ViewModifier Kullanımı

Merhaba, bu yazımda ViewModifier’ların SwiftUI’da kullanımına ve önemine değineceğim.

ViewModifier Nedir?

ViewModifier, SwiftUI'da bir view’ın belirli bir biçimde değiştirilmiş bir halini tanımlamak için kullanılır. View’ı farklı yerlerde kullanırken reusable kod yazmamıza olanak tanır, tekrar aynı kodu yazmamış oluruz. Hem kodun okunurluğunu artırır hem de kod kalabalığından kurtarır. Aynı zamanda flexible bir yapı sağlar.

Diyelim ki yazacağım app’te bir uyum yakalamak, bütünlük yaratmak amacıyla text’lerim aynı şekilde görünsün istiyorum. Bunu yapmak için aklıma gelen ilk yöntem custom bir text view oluşturmaktır. Böylece istediğim yerlerde CustomTextView() yazıp kolayca çağırıp kullanabilirim.

struct CustomTextView: View {
    var body: some View {
        Text("Text")
            .frame(width: 100, height: 40)
            .font(.headline)
            .foregroundColor(.white)
            .background(.secondary)
            .cornerRadius(25)
    }
}

Peki bunun dezavantajı nedir?

Bu kodda uyguladığım özellikleri sadece Textiçin uygulamış oldum, diyelim ki bir Buttoniçin de uygulamak istiyorum. Aşağıdaki kod incelendiğinde aynı özellikleri Button’a tanımlamak için tekrar aynı kod satırlarını yazmak zorunda kaldığımız görülebilir.

VStack {
    CustomTextView()
    
    Button("Button") {
        // action
    }
    .frame(width: 100, height: 40)
    .font(.headline)
    .foregroundColor(.white)
    .background(.secondary)
    .cornerRadius(25)
}

Bunu engellemenin en kolay kolu ViewModifier’dır. ViewModifier, görünümün belirli özelliklerini veya davranışlarını ayarlamak için kullanılan işlevlerin bir kombinasyonunu içerir.

Aşağıdaki gibi bir görünüm elde etmek istediğimizi düşünün:

Bu yüzden hem text’e hem de button’a uygulayabilmek için bir custom view modifier’a ihtiyacım var.

struct CustomModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .frame(width: 100, height: 40)
            .font(.headline)
            .foregroundColor(.white)
            .background(.secondary)
            .cornerRadius(25)
    }
}

.modifier fonksiyonu kullanılarak belirlenen custom özellikler hem text’e hem button’a aktarılmış olur.

VStack {
    Text("Text")
        .modifier(CustomModifier())
    
    Button("Button") {
        // action
    }
    .modifier(CustomModifier())
}

Not: Sadece bir görünümü özelleştirmek istediğimde de ViewModifier kullanabilirim. Ancak asıl kullanım amacını ve farkını göstermek istediğimden iki görünüm üzerinden örnekledim.

Özetle, ViewModifier kullanımı bize reusable ve flexiable bir yapı sağlar. Kod karmaşasından kurtarır ve anlaşılır kod yazmamızı sağlar.

Umarım faydalı bir yazı olmuştur.

Diğer yazılarıma buradan erişebilirsiniz:

Higher Order Functions in Swift

SwiftUI Property Wrappers Nedir? Nasıl Kullanılır?

Ford Otosan — Connected Products & Engineering Tribe
Mobile Software Development Team Member
Bengi Anıl