SwiftUI’da Navigasyon ve Gezinme Yönetimi

yazar

SwiftUI’da, NavigationLink, NavigationStack, NavigationPath ve navigationDestination; kolay yönetilebilir ve dinamik gezinme yapıları oluşturmanıza imkan tanır. Bu dört yapı, birbirleriyle uyum içinde çalışarak kullanıcıların uygulamanızda gezinti yapmasını sağlar.

Bu kavramların detaylı bir açıklamasının aşağıda bulabilirsiniz.

1. NavigationLink

NavigationLink, SwiftUI’da kullanıcıların bir görünümden diğerine geçiş yapmasını sağlayan temel bir bileşendir. NavigationLink‘i iOS 17’den sonra NavigationStack, öncesinde NavigationView içinde kullanırız.

Özellikler ve Yöntemler:

  • NavigationLink(_ titleKey:destination:):
    • Açıklama: Belirli bir başlık anahtarı (titleKey) ve hedef view (destination) ile bir navigation link oluşturur.Kullanım: Bu yöntem, yerelleştirilmiş başlıklar için kullanışlıdır.
    NavigationLink(LocalizedStringKey("Title"), destination: MyDestinationView())
  • NavigationLink(_ titleKey:value:):
    • Açıklama: Belirli bir başlık anahtarı (titleKey) ve bir değer (value) ile bir navigation link oluşturur. Bu değer, genellikle bir NavigationPath ile birlikte kullanılır.Kullanım: Bu yöntem, yerelleştirilmiş başlıklar ve belirli bir değeri navigation state’e aktarmak için kullanışlıdır.
    NavigationLink(LocalizedStringKey("Title"), value: myValue)
  • NavigationLink(value:label:):
    • Açıklama: Belirli bir değer (value) ve bir label (label) ile bir navigation link oluşturur. Bu değer, genellikle bir NavigationPath ile birlikte kullanılır.Kullanım: Bu yöntem, bir değeri navigation state’e aktarmak ve label olarak bir view kullanmak için kullanışlıdır.
    NavigationLink(value: myValue) { Text("Label") }
  • NavigationLink(destination:label:):
    • Açıklama: Belirli bir hedef view (destination) ve bir label (label) ile bir navigation link oluşturur.Kullanım: Bu yöntem, belirli bir hedef view’e geçiş yapmak ve label olarak bir view kullanmak için kullanışlıdır.
    NavigationLink(destination: MyDestinationView()) { Text("Label") }

Bu initializer’lar, SwiftUI’da navigation işlemlerini esnek ve kolay bir şekilde yapmanızı sağlar. Kendi kullanım senaryonuza göre bu initializer’lardan birini seçebilirsiniz.

2. NavigationStack

SwiftUI’da ekranlar arasında gezinmeyi sağlayan yeni bir yapı taşıdır. NavigationStack, gezinme yığınının yönetimini sağlar ve kullanıcıların birden fazla ekranda gezinebilmeleri için gereken altyapıyı oluşturur.

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                NavigationLink(destination: DetailView()) {
                    Text("Go to Detail View")
                }
            }
            .navigationTitle("Home")
        }
    }
}

struct DetailView: View {
    var body: some View {
        Text("This is the Detail View")
            .navigationTitle("Detail")
    }
}

3. NavigationPath

NavigationPath, gezinme yığınının durumunu izler ve belirli türdeki verileri tutar. Bu sayede, dinamik olarak farklı görünümler arasında geçiş yapabilirsiniz. NavigationPath, yığın tabanlı gezinme modelinin daha esnek ve veri odaklı bir şekilde yönetilmesine olanak tanır.

Özellikler ve Yöntemler:

  • append(_:): Yola yeni bir öğe ekler.
  • removeLast(): Yoldaki son öğeyi kaldırır.
  • removeLast(_:): Yoldan belirli sayıda öğe kaldırır.

4. navigationDestination

.navigationDestination, belirli bir veri türüne dayalı olarak bir görünüm tanımlamanıza olanak tanır. Bu, dinamik ve tür bazlı gezinme yapıları oluşturmanıza yardımcı olur. navigationDestination, genellikle NavigationStack ile birlikte kullanılır ve belirli veri türleri için hedef görünümleri belirlemenize olanak tanır.

navigationDestination, NavigationStack içinde tanımlanır ve bir NavigationPath‘de bulunan belirli bir veri türü için hedef bir görünüm sağlar.

import SwiftUI

struct ContentView: View {
    @State private var path = NavigationPath()

    var body: some View {
        NavigationStack(path: $path) {
            VStack {
                Button("Go to Number Detail View") {
                    path.append(42) // Integer türü veriyi yığına ekler
                }
                Button("Go to Text Detail View") {
                    path.append("Hello, SwiftUI!") // String türü veriyi yığına ekler
                }
            }
            .navigationDestination(for: Int.self) { number in
                NumberDetailView(number: number)
            }
            .navigationDestination(for: String.self) { text in
                TextDetailView(text: text)
            }
        }
    }
}

struct NumberDetailView: View {
    var number: Int

    var body: some View {
        Text("Detail View with number: \\(number)")
    }
}

struct TextDetailView: View {
    var text: String

    var body: some View {
        Text("Detail View with text: \\(text)")
    }
}

Hepsi Bir Arada Örnek Kullanım:

SwiftUI 4.0 ve iOS 17 ile birlikte gelen NavigationStack ve NavigationPath kullanılarak daha dinamik ve karmaşık gezinme yapıları oluşturulabilir. NavigationLink bu yeni yapılarla uyumlu bir şekilde çalışır.

import SwiftUI

struct ContentView: View {
    @State private var path = NavigationPath()

    var body: some View {
        NavigationStack(path: $path) {
            VStack {
                NavigationLink("Go to Number Detail View", value: 42)
                NavigationLink("Go to Text Detail View", value: "Hello, SwiftUI!")
            }
            .navigationDestination(for: Int.self) { number in
                NumberDetailView(number: number)
            }
            .navigationDestination(for: String.self) { text in
                TextDetailView(text: text)
            }
        }
    }
}

struct NumberDetailView: View {
    var number: Int

    var body: some View {
        Text("Detail View with number: \\(number)")
    }
}

struct TextDetailView: View {
    var text: String

    var body: some View {
        Text("Detail View with text: \\(text)")
    }
}

Yukarıda Bahsedilen Yapıların En Kısa Özeti

  • NavigationLink: Bir görünüme geçiş yapmak için kullanılır; belirli bir hedef görünümüne bağlantı sağlar.
  • NavigationStack: Gezinti hiyerarşisini yönetir.
  • NavigationPath: Gezinti yığınının durumunu izler ve belirli türdeki verileri (rotaları) saklar.
  • navigationDestination: Belirli veri türleri için hedef görünümleri tanımlar.

Yorum yapın