SwiftUI: Binding ve State

Binding ve State, SwiftUI içerisinde yoğun kullanılan veri yapılarıdır. Bu veri yapılarını örneklerle öğrenelim!

Ufuk Köşker
TurkishKit
4 min readMay 31, 2020

--

Merhaba TurkishKit okuyucuları!👋 Bu yazımızda @Binding ve @State kavramlarına değineceğiz ama ilk önce Property Wrapper kavramını öğrenmeliyiz. Hadi hiç vakit kaybetmeden başlayalım.🤟

Yazar Önerisi!😉

SwiftUI serisinin diğer yazılarını okumanızı öneririz! Seriye buraya tıklayarak ulaşabilirsiniz.

Property Wrapper

Swift 5.1 ile gelen bu yapı ile değişkenlere ön ek olarak eklediğiniz @property tanımları ile değişkeni temizleme veya değişkene yeni değer atama… vb. işlemleri için bir fonksiyon yazmadan değişken oluşturulduğu anda istediğiniz işlemi gerçekleştirebiliyorsunuz. SwiftUI ile birlikte aktif olarak kullanılan bu yapı bizlere oldukça okunaklı ve etkileşimli yapılar oluşturmamızı sağlıyor. Buraya kadar kafanız çok karıştı değil mi?🥶Endişelenmeyin, şimdi inceleyeceğimiz örnek ile çok rahat anlayacaksınız.😉

Hadi Bir Örnek İnceleyelim!

Bu örneğimizde neler oluyor bir inceleyelim. @UpperCase olarak tanımlanan değişkenler, içerisindeki yazıları otomatik olarak büyük harf yapar. Bu gibi yapıları kullanmamız kod okunabilirliği açısından oldukça yararlı olacaktır.

Yaptığımı örnek.

Şimdi gelin SwiftUI kütüphanesinin “Property Wrapper” yapılarını inceleyelim.

  • @State: Sadece tanımlandığı “View” nesnesi içinde kullanılan ön ektir. Değeri değiştiğinde, değerin bağlı olduğu “View” nesnelerini günceller.
  • @Binding: “@State” ön eki tanımlandığı “View” nesnesi içinde kullanılıyor demiştik. Bu “@State” değişkeni tanımlandığı “View” nesnesinden değilde başka bir “View” nesnesinden ulaşmamız gerektiğinde kullanacağımız ön ektir.

@State

Şimdi @state ve @binding kavramlarını daha iyi anlamak için örnek bir uygulama yapacağız. İlk olarak Xcode uygulaması üzerinden bir SwiftUI projesi oluşturuyoruz.

Projemizi oluşturduktan sonra aşağıdaki kodları yazıyoruz.

Kodları yazdıysak artık projemizi çalıştırabiliriz. Şimdi buton üzerine tıklayalım. Böylece buton içerisindeki aksiyon parametresinde bulunan “self.text” değişkenine hangi değeri girersek o değerin ekranda göründüğünü göreceğiz.

@Binding

Şimdi ise bir @binding örneği yapalım. Az önceki projemizi hiç kapatmadan içerisine yeni bir “SwiftUI View” dosyası açarak devam ediyoruz. Yeni dosyamıza “SecondView” adını verelim.(Dilerseniz istediğiniz bir adıda verebilirsiniz)

Yeni bir “SwiftUI View” dosyası açtık.

Aşağıdaki kodları kullanarak ikinci sayfamızı kodlamaya başlayalım.

“SecondView” sayfamızı kodlamaya devam edelim.

Fark ettiğimiz üzere “Preview” penceresinde yazdığımız kodların çıktısını göremiyoruz. Endişelenmeyin bir yanlışlık yapmadık. SecondView(show: .constant(true)) yaparsak kodumuzun çıktısı görünecektir. Bu “show” değişkenine, başlangıç değeri vermemizi sağlıyor.

“ContentView” yani ilk başta kodlama yaptığımız sayfaya geri dönelim ve kodlamaya devam edelim.

“ContentView.swift” dosyası üzerinde kodlama yapmaya devam ediyoruz.

İki sayfa arasında bir fark var. Fark ettiniz mi ? 🤔

“ContentView” sayfasında “show” değişkenini @State ile tanımladık.
“SecondView” sayfasında ise “show” değişkenini @Binding ile tanımladık.

Bunun sebebi şu; “ContentView” sayfasından “SecondView” sayfasındaki “show” değişkenine müdahale edip ikinci sayfayı ekranda gösterebilmek için @Binding ön ekini kullandık. Eğer @Binding ön ekini @State ön eki ile değiştirirsek “SecondView” sayfası açılmayacaktır.

Şimdi ise @Binding ile “SecondView” sayfasındaki soyadı değiştirelim.

“SecondView” sayfasındaki “secondText” değişkenini “@Binding var secondText: String” olarak değiştirelim.

Şimdi bir de “ContentView” sayfamızda da değişiklikler yapalım. “SecondView” sayfasında yaptığımız değişiklikten dolayı Xcode uygulaması bizi uyarıyor ve bir parametreyi düzeltmemizi istiyor.

Xcode uygulaması bizi uyarıyor.

@State ön eki ile yeni bir değişken oluşturalım. Ardından yeni bir buton nesnesi koyalım ve bu buton üzerine basıldığında “SecondView” sayfasındaki “secondText” değeri değişsin.

Sayfamızın son hali.

Uygulamayı Test Edelim

Artık uygulamamızı bitirdik. Şimdi ise en eğlenceli kısmına geldik. Uygulamamızı “Play” ikonlu butona tıklayıp çalıştıralım ve test edelim.

Bir yazımızın daha sonuna geldik. Bu yazımızda SwiftUI içerisinde sıkça kullanılan @Binding ve @State ön eklerini ele aldık. Anlamadığınız herhangi bir yer olursa sosyal medya hesaplarımız üzerinden bizimle iletişime geçebilirsiniz. Bir sonraki yazımızda görüşmek dileğiyle!🤗

Swift Öğrenin. Uygulama Geliştirin. Sınırların Ötesine Geçin.

Hem kod yazmaya yeni başlayanların hem de profesyonellerin rahatlıkla takip edebilecekleri 40 saatlik videolu eğitim ile Swift programlama dilini derinlemesine keşfedin. Eğitim boyunca karşılaşacağınız problemleri birebir online görüşmelerde çözün.

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

Twitter | Instagram | Facebook

--

--