SwiftUI 2 Navigasyonlara Giriş

Günümüzde tek bir ekrandan oluşan neredeyse hiç bir uygulama bulunmamakta. Neredeyse her uygulama birden fazla ekrandan oluştuğu için bu sayfalar arasındaki geçiş işlemleri, mobil programlamadaki en onemli noktalardan biridir. SwiftUI’ da ise navigasyon işlemleri, UIKit’dekinden çok farklı . SwiftUI 2 de navigasyon geçişleri için kullandığımız component ise NavigationViewdir (SwiftUI 4 ile deprecated olmuş durumdadır). NavigationView ile sayfalar arası geçişler ve data taşımayı kolaylıkla yapabiliriz.

NavigationView’i Nasıl Tanımlarız

NavigationView componentinin çalışabilmesi için en üst katmanda yer alması gerekmektedir. Burada gözüktüğü gibi NavigationView componentinimiz en dış katman olarak yer almakta ve içinde bir Text componenti yer almaktadır.

Navigasyon Sayfalarımıza Başlık Verme

NavigationView sayfalarımıza .navigationTitle() ile başlık da eklenebilmektedir.

Görüldüğü gibi .navigationTitle() komutunu NavigationView componentine değil, bunun içinde yer alıp, ekranı kapsayan componente ekledik. Çünkü vermiş olduğumuz başlık, mevcut da bulunduğumuz sayfanın başlığı olmaktadır. Bir başka sayfaya NavigationView üzerinden gittiğimiz zaman bu başlık diğer sayfalarda başlık seklinde değil, bir sonraki sayfadaki back butonun yanında gözükecektir.

Navigasyon Bar’ı Kullanma

navigationBarItems methodunu kullanarak NavigationView içerisinde bir bar tanımlayabilir ve bu barın içine istediğimiz componentleri verebiliriz.

Burada gözüktüğü gibi navigasyon barımızı trailing ve leading diye ikiye ayırabilir ve içerisine istediğimiz componenti verebiliriz.

NavigationLink İle Yeni Sayfalara Geçiş

NavigationView içerisinde yer alan bir sayfamızdan yeni bir sayfaya geçiş yapmak için NavigationLink methodu kullanılmaktadır.

Destination parametresi hangi sayfaya gidileceğini belirtmektedir. Biz burada kendi oluşturduğumuz bir sayfa yerine SwiftUI’ ın kendi componentlerinden birisini verdiğimiz için, kendisi bir sayfa oluşturup içinde vermiş olduğumuz Text componentini göstermektedir. NavigationLink içerisinde yazmış oldugumuz Text(“Yeni sayfaya git”) componenti buton görevi görüp, üzerine tıklanıldığında yeni bir sayfaya yönlendirir.

NavigationLink İle Sayfalar Arasında Veri Paylaşma

Yeni bir sayfa oluşturduk ve bu sayfaya basit bir şekilde yaşadığımız evin rengini içeren bir yazıyı koyduk. Burada bulunan colorOfHouse değişkeninin ilk aşamada bir değeri yok. Bu değişkenin değeri kendisini çağıran sayfada verilecektir.

Burada gözüktüğü gibi yeni bir sayfaya giderken kullandığımız destination’a oluşturmuş oldugumuz yeni sayfayı verdik. Bu sayfa icinde initial değeri bulunmayan bir değişken olduğu için, bu değişkenin de ilk değerini verdik. Bu sayede sayfalar arasında veri taşıyabilmiş olduk.

NavigationLink’i Bir Koşula Bağlama

Kimi zaman bazı işlemlerin sonucuna göre başka bir sayfaya yönlendirmek isteriz. Bu zamanlarda da NavigationLink methodunun içindeki “isActive” parametresinin kullanılması gerekiyor. isActive parametresi Bool bir Binding değişkeni dinleyip, bu değişken true olduğu zaman harekete geçicektir.

NavigationLink içerisine EmptyView verdik. Çünkü bu NavigationLink’in arka planda kalmasını ve sadece shouldLandToNewPage değişkeninin true olduğu durumlarda harekete gecmesini istiyoruz. Belirtmiş oldugumuz değişkenin değişebilmesi icin bir buton oluşturduk ve bu butonun aksiyonunda shouldLandToNewPage değişkenini true ile değiştirdik. Bu sayede NavigationLink methodumuz tekrardan çağrıldı ve yeni sayfaya yönlendirdi.

NavigationLink’i Background Olarak Kullanmak

Liste methodu ile birden fazla ürünü listelediğimizi düşünelim. Kodumuzun daha basit ve okunabilir olması için NavigationLink’i background olarak kullanabiliriz.

Kaynaklar