SwiftUI ve Butonlar

Apple, butonları “Bir eylemi başlatan kontrol.” olarak tanımlıyor. Bu yazımda sizlere SwiftUI’da butonların işlevini ve bu butonları özelleştirmeyi anlatacağım.

SwiftUI ve Butonlar Kapak Fotoğrafı

Button nedir?

Butonların ne olduğunu uzun uzadıya anlatmaya gerek olmadığını düşünüyorum, hepimizin bildiği gibi kullanıcıların dokunmasıyla aksiyon alan bir kontrol. Daha önce UIKit deneyiminiz var ise orada bulunan “UIButton” ile oldukça benzer. Fakat daha esnek ve çok daha kolay özelleştirilebilir. Az sonra bir kaç satırda oldukça güzel bir buton oluşturduğumuzu göreceksiniz.

İlk adım:

En basit hali ile bir buton oluşturalım.

Button(action: {
    print("Button action")
}) {
    Text("Button label")
}

“Button label” adında bir text oluşturduk ve tıkladığımızda aksiyon olarak terminale çıktı veriyor. Fakat bu görünüm oldukça sıkıcı, bunu biraz daha eğlenceli hale getirelim.

Adım 2:

Tabii text’in yanına bir buton eklerken HStack’den yardım almamız gerekiyor. (HStack’in ne olduğunu kısaca hatırlayalım. Görünümleri yatay çizgide düzenlemize olanak sağlayan yapı.)

Button(action: {
    print("Button action")
}) {
    HStack {
        Image(systemName: "heart.fill")
        Text("Favorites")
    }
}

Bu haliyle çok daha güzel fakat daha belirgin hale getirmek için bir de çerçeve ekleyebiliriz.

Adım 3:

HStack’den hemen sonra “.overlay” metodunu kullanarak bir çerçeve oluşturalım. Ayrıca köşeleri yumuşatmak için bir kaç kod daha ekleyelim. (RoundRectangle)

Button(action: {
        print("Button action")
    }) {
        HStack {
            Image(systemName: "heart.fill")
            Text("Favorites")
        }.padding(10.0)
        .overlay(
            RoundedRectangle(cornerRadius: 10.0)
                .stroke(lineWidth: 2.0)
        )
    }

Butonumuz dışarıdan her ne kadar güzel gözükse de şimdilik tıkladığımızda terminale bir çıktı vermekten başka bir işe yaramıyor.

Adım 4:

Bir değişken ekleyerek ve “action:” içinde .toggle metodunu kullanarak butonu havalı hale getirelim! 🤘🏻

(Toggle methodu neydi? toggle emekti. Şaka bir yana, tetiklendiğinde true-false ya da 1–0 arasında geçiş yapan bir metod.)

struct ContentView: View {

    @State var favourite = false

    var body: some View {
        Button(action: {
            self.favourite.toggle()
        }) {
            HStack {
                Image(systemName: favourite ? "heart.fill" : "heart")
                                        .foregroundColor(favourite ? Color.red : Color.gray)
                Text("Favorites")
            }
            .padding(10.0)
            .overlay(
                RoundedRectangle(cornerRadius: 10.0)
                    .stroke(lineWidth: 2.0)
            )
        }
    }
}

Final! Butonumuzun son görünümüne ulaştı. ✨

Özet

Gördüğünüz gibi, SwiftUI’da butonlar ile çalışmak çok daha sezgisel ve kolay bir hale geldi. Umarım bu yazı sizler için faydalı olur ve projelerinizi geliştirmeye yardımcı olur.

SwiftUI öğrenme sürecim devam ediyor ve bir yandan içerik üreterek topluluğa fayda sağlamayı amaçlıyorum. Soru ve geri bildirimleriniz için bana X hesabımdan ulaşabilirsiniz!