SwiftUI: Button

SwiftUI ile uygulamalarınıza buton ekleyerek aksiyonlarınızı erişilebilir hale getirin.

Merhaba TurkishKit okuyucuları! 👋🏻 Bu yazımızda SwiftUI ile nasıl buton elemanları oluşturabileceğimizi öğreneceğiz. Hazırsanız hiç vakit kaybetmeden başlayalım! 🎬

Yazı Önerisi

ARKit serisinin tüm yazılarını aşağıdaki linke tıklayarak keşfedebilirsiniz.

TurkishKit

SwiftUI ile bir buton elemanı oluşturmak gerçekten çok basittir. Örneğin, sadece üç satır yazarak bir buton oluşturabiliriz.

Button("Tapped Me!") {
    self.isOn.toggle()
}

Butonun görünüşü ile biraz daha oynamak istersek kendisini bu şekilde kullanmak daha doğru olacaktır.

Button(action: {
    self.isOn.toggle()
}) {
    HStack {
        Image(systemName: "hand.raised.fill")
        Text("Tapped Me!")
    }
    .padding()
    .background(
        Rectangle()
           .cornerRadius(20)
           .foregroundColor(.red)
    )
}

Bu şekilde butonunuza istediğiniz görünümü vermeniz mümkündür. Hem de bu şekilde butonun tasarımı ile işlevselliğini birbirinden ayırmanız kolaylaşır. (“action” özelliğinde butona tıklandığı zaman hangi aksiyonların alınması gerektiği yazılır. Altındaki bölüme ise butonun nasıl görüneceği tanımlanır.)

Yalnız, bu kodları çalıştırdığınızda göreceksiniz ki HStack yapısının içerisinde bulunan yazı ve resimler mavi renklidir. Yazının mavi renkli olmasının sebebi Text elemanlarının varsayılan renginin mavi olmasıdır ama resimlerin tamamen mavi olması tabii ki doğru değildir. Bunu düzeltmek için Image elemanında renderingMode fonksiyonunu çalıştırmak gerekir.

Button(action: {
    self.isOn.toggle()
}) {
    HStack {
        Image(systemName: "hand.raised.fill")
            .renderingMode(.original)
        Text("Tapped Me!")
    }
    .padding()
    .background(
        Rectangle()
           .cornerRadius(20)
           .foregroundColor(.red)
    )
}

Bu şekilde görselleriniz mavi olmayacaktır.

Bir makalemizin daha sonuna geldik. Bu yazımızda SwiftUI ile nasıl buton elemanları oluşturabileceğimizi öğrendik. Artık siz de kendi buton elemanlarınızı oluşturabilirsiniz! Hepinize keyifli kodlamalar dilerim! 🤘

Bizi daha yakından takip etmek istiyorsanız, sosyal medya hesaplarımıza aşağıdan ulaşabilirsiniz.

Twitter | Instagram | Facebook