SwiftUI: ViewModifiers nedir?

SwiftUI, iOS uygulamaları yapmak için hızla popüler bir seçim haline geliyor ve kullandığınız en yaygın şeylerden biri de ViewModifiers. Bunu okumadan önce SwiftUI ile çalıştıysanız ve ViewModifier'ların ne olduğunu bilmiyorsanız, onları daha önce fark etmeden kullandığınızı garanti ederim.

ViewModifier'lar, görünümlerini ve davranışlarını özelleştirmek için uygulamanızda kullandığınız Görünümler üzerinde çağırdığınız yöntemlerdir. Bunları Görünümlerinize renkleri ve boyutları değiştirmek, hareketler eklemek, erişilebilirlik seçenekleri vb. eklemek için kullanırsınız, eğer daha önce kullandıysanız .backgroundveya .foregroundColorprojenizde, bunlar ViewModifier örnekleridir.

ViewModifiers'ı nasıl kullanıyorsunuz?

Bir proje oluşturarak başlayalım, sizi tüm süreçle sıkmayacağım, bu yüzden projenizi oluştururken Storyboard yerine SwiftUI'yi seçtiğinizden emin olun.

Sizin için oluşturulan varsayılan Görünüm zaten bazı değiştiriciler kullanıyor, bu yüzden şuna bir göz atalım

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
    }
}

• .padding: Görünümünüz için dolguyu belirlemenizi sağlar, herhangi bir değer sağlamadığımız için tüm kenarlar için sistem varsayılan dolgusunu uyguladığını unutmayın. Bunun gibi kenarları ve değerleri belirtebilirsiniz .padding(.top, 12)veya .padding(.horizontal, 12)örneğin
• .foregroundColor: Metin renklerini, renk tonlarını vb. etkileyen görünüm için ön plan rengini ayarlar

• .frame: Bir Görünümün boyutunu değiştirmek için kullanılır
• .font: Yazı tipi ailesini, boyutunu vb. değiştirmek için kullanılır.Text

Başlamadan önce düğme üzerinde kullanmak istediğimiz kısıtlamaları gözden geçirelim — Dolgu, Köşe yarıçapı, Arka Plan Rengi.

Biraz metin içeren basit bir düğme ekleyerek başlayalım:

Button(action: {
    // On click
}) {
    Text("Label")
}

Değiştiricilerimizi ekledikten sonra:

Button(action: {
    // On click
}) {
    Text("Label")
        .padding(.horizontal, 20)
        .padding(.vertical, 14)
        .foregroundColor(Color.white)
}
.background(Color.blue)
.cornerRadius(14)

      
                

                    
                    
                
            

Yukarıdaki örnek çok basit, ancak projenizde benzer stillere (ortak dolgu değerleri, temalı arka plan renkleri vb.) sahip birçok Görünüm varsa, aynı değiştiricileri tekrarlamak çok hızlı bir şekilde can sıkıcı olabilir. Neyse ki SwiftUI, kendi özel değiştiricilerinizi oluşturmanıza izin verir.

Düğme metninin oluşturmaya çalıştığımızla tam olarak eşleşmediğini fark ederseniz, yukarıdaki örneği ele alalım. Düğme metni için özel bir değiştirici oluşturalım:

struct ButtonTextModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.system(size: 17, weight: .semibold))
            .lineSpacing(22)
    }
}

Text("Label")
  .padding(.horizontal, 20)
  .padding(.vertical, 14)
  .foregroundColor(Color.white)
  .modifier(ButtonTextModifier())

      
                

                    
                    
                
            

extension View {
    func buttonText() -> some View {
        modifier(ButtonTextModifier())
    }
}

Text("Label")
  .padding(.horizontal, 20)
  .padding(.vertical, 14)
  .foregroundColor(Color.white)
  .buttonText()