SwiftUI Temel Bileşenleri

Merhabalar, bugün sizlere SwiftUI yapısının temellerinden bahsedeceğim.

SwiftUI, WWDC 2019 etkinliğinde tanıtılan bir yapıdır. Medium hesabımda detaylı olarak incelediğim yazıya aşağıdaki linkten ulaşabilirsiniz :

SwiftUI Nedir?


SwiftUI yapısını kullanarak daha az kod yazarak daha efektif uygulamalar geliştirebilirsiniz. SwiftUI temellerine göz atarak bu yapı için bir temel oluşturacağız.

View

iOS uygulamalarında görülen her bir piksel bir View hücresidir. View içerisinde çeşitli metinsel yapılar, butonlar, resimler, takvim kullanılmaktadır. SwiftUI yapısında da her şey bir View hücresidir. View içerisinde StackView ekleyebiliriz. Dikey Stack View ekleyebilmek için VStack, Yatay Stack View için HStack kullanabiliriz.

VStack{
...
}
HStack{
...
}

Yukarıdaki gibi istenilen şekilde Stack View tanımı yapabilirsiniz. View türünü belirttikten sonra içerisine istediğimiz View objesini koyabiliriz.


Text

VStack içerisine bir Text objesi ekleyerek örneğimize başlayabiliriz. Text objesi oluşturabilmemiz için gerekli olan kod satırı Text(“Hello World”) şeklindedir. Oldukça basit ve sade bir şekilde text ekleyebiliyoruz.

Basit bir şekilde ekrana “Hello World” mesajı bastırdık. Text objemizi özelleştirebiliriz. Font özelliğini değiştirebiliriz. Text boyutunu arttırabiliriz.


Image

Text objesinden sonra View’a Image objesi ekleyebiliriz. VStack içerisine bir resim ekleyebilmemiz için tek yapmamız gereken Assets klasörüne resimi sürükleyip, bırakmaktır. Daha sonra kod kısmında ise Image(“SwiftUI”) kodunu kullanmak.

Image objemizi istenilen boyutlarda çeşitli düzenlemeler yapabiliriz.


Button

Text ve Image bileşenlerinden sonra Button bileşenine geçiş yapıyoruz. SwiftUI image bileşininin bulunduğu örneğe ek olarak bir Button ekleyelim. Button’da bir action birde text alanı bulunmaktadır.

Button(action: {
                print("Welcome to SwiftUI")
            }) {
                
                Text("Hello SwiftUI")
            }

Bu şekilde bir buton tanımladık. Kullanıcı click yaptığında “Welcome to SwiftUI” mesajını görüntüleyecek.

Butonu istediğiniz şekilde özelleştirip kullanabilirsiniz.


Detaylı bilgi için aşağıdaki linki ziyaret edebilirsiniz :

SwiftUI Introducing

Evet arkadaşlar, SwiftUI yapısının temel bileşenlerine bir göz attık. Gelecek yazılarda görüşmek üzere. Bol kodlamalar herkese 🙂

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir