SwiftUI'de ButtonStyle

SwiftUI, stil protokollerini kullanarak görünümler oluşturmanın ve özelleştirmenin güçlü bir yolunu sunar. Bu protokoller, görüşlerimizin görünüşünü ve verdiği hissi tek bir kod satırında tanımlamamızı sağlar.

Sonuç olarak, görünümler görsel olarak tutarlıdır ve bu da uygulamanın kullanımını daha kolay ve daha çekici hale getirir.

ButtonStyle Olmadan Şekillendirme Düğmesi

Düğmemize farklı değiştiriciler uygulayarak satır içi stil verebiliriz. Bu örneği göz önünde bulundurun:

Button("Tap me") {}
    .font(.system(.callout, weight: .bold))
    .foregroundColor(.white)
    .frame(maxWidth: .infinity, maxHeight: 48)
    .background(.blue)
    .cornerRadius(8)

Tek bir düğme tasarlarsanız, bu yaklaşım tamamen iyidir. Ancak, aynı stille birden çok düğme geliştirmeniz gerekiyorsa, protokolü kullanmanız gerekir ButtonStyle. Uygulama genelinde farklı düğmelere aynı stili paylaşmaya ve uygulamaya yardımcı olacaktır.

ButtonStyle ile Düğme Şekillendirme

adlı özel düğme stilimizi oluşturalım PrimaryButtonStyle. Bu, uygulama boyunca birincil düğmeler için kullanılan stildir.

Bu örneğe bir göz atalım:

struct PrimaryButtonStyle: ButtonStyle {
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.system(.callout, weight: .bold))
            .foregroundColor(.white)
            .frame(maxWidth: .infinity, maxHeight: 48)
            .background(.blue)
            .cornerRadius(8)
    }
}

Oluşturulan düğme stilini uygulamak için şunu yazmayı deneyin:

Button("Tap me") {}
    .buttonStyle(PrimaryButtonStyle())

ButtonStyleYapılandırması

Düğmenin yapılandırma nesnesi, isPresseddüğmeye o anda basılıp basılmadığını gösteren boole değeri dahil olmak üzere çeşitli özelliklere sahiptir. Bir kullanıcı bir düğmeye dokunduğunda düğme stilimizi değiştirmek için bunu kullanabiliriz. Bunu yapmak için şöyle bir şey yazabiliriz:

struct PrimaryButtonStyle: ButtonStyle {
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.system(.callout, weight: .bold))
            .foregroundColor(.white)
            .frame(maxWidth: .infinity, maxHeight: 48)
            .background(configuration.isPressed ? .blue.opacity(0.75) : .blue)
            .cornerRadius(8)
    }
}

Profesyonel ipucu

Aşağıdaki uzantıyı ekleyerek kodumuz daha temiz ve daha okunaklı hale getirilebilir PrimaryButtonStyle:

extension ButtonStyle where Self == PrimaryButtonStyle {
    
    static var primary: PrimaryButtonStyle {
        PrimaryButtonStyle()
    }
}

Button("Tap me") {}
    .buttonStyle(.primary)

ile ButtonStylebir düğmenin görünümünü, düzenini ve etkileşimlerini tanımlayabilir ve tüm uygulama genelinde tutarlılığı sağlayabiliriz.

Ek olarak, düğmeyle ilgili mantığı ve stili yeniden kullanılabilir bileşenlere sığdırmak için bir yol sağlar. Bu, kod tabanını daha bakım yapılabilir ve ölçeklenebilir hale getirir.

Okuduğunuz için teşekkürler!

Bu makaleyi yararlı bulursanız, diğerlerinin daha kolay keşfedebilmesi için onu alkışladığınızdan emin olun.