NavigationLink — nedir, SwiftUI'de geçiş düğmesi

SwiftUI'de NavigationLink nedir?

NavigationLink, basıldığında bir navigasyon geçişi başlatan View'dir. NavigationStack içinde NavigationLink'e basmak, hedef ekranı yığına yerleştirir ve sistem Geri düğmesini gösterir. NavigationLink, iOS 13'ten beri mevcuttur ve SwiftUI'de kullanıcı navigasyonunun birincil yöntemidir.

NavigationLink, UIButton'dan miras almaz — bağlama otomatik olarak uyum sağlayan bir SwiftUI View'dir. List içinde NavigationLink, bir açıklama göstergesi ile görüntülenir. Bir listenin dışında NavigationLink, normal bir düğme gibi davranır ancak navigasyon davranışına sahiptir.

SwiftUI Lab (2024)'e göre NavigationLink, SwiftUI uygulamalarında en çok kullanılan View'lerden biridir ve yalnızca Text, Image ve VStack'ten sonra gelir. Başlatma biçimleri arasındaki farkları anlamak, performans ve öngörülebilir navigasyon davranışı için kritiktir.

NavigationLink'in iç çalışması

Basıldığında NavigationLink, en yakın NavigationStack veya NavigationView ile ilişkili navigasyon yığına bir değer (veya destination) ekler. SwiftUI, View hiyerarşisi boyunca navigasyon yolunu iletmek için EnvironmentValue'yu kullanır. NavigationLink bu yolu Environment'dan okur ve basıldığında onu değiştirir.

NavigationLink başlatma biçimleri

NavigationLink'in iki ana biçimi vardır: destination ile (hedef View'i doğrudan belirtme) ve value ile (NavigationDestination için değer). Biçim seçimi iOS sürümüne ve navigasyon mimarisine bağlıdır.

Destination biçimi (iOS 13+): NavigationLink(destination: DetailView(), label: { Text("Open") }). Bu biçim, kullanıcı bağlantıya tıklamamış olsa bile NavigationLink'i işlerken hemen DetailView oluşturur. Bu, View'in erken başlatılmasına ve hedef View başlatıcısında ağır işlemler gerçekleştiriyorsa potansiyel performans sorunlarına yol açar.

Value biçimi (iOS 16+): NavigationLink(value: "detail_42", label: { Text("Open") }). Hedef View yalnızca bağlantı basıldığında, SwiftUI ilgili .navigationDestination'i bulduğunda oluşturulur. Bu, erken başlatmayı önler ve navigasyonu daha öngörülebilir hale getirir.

NavigationStack ile NavigationLink: doğru kullanım

NavigationStack ile NavigationLink iOS 16+'da value biçimine geçiş gerektirir. Navigasyon için bir veri türü (String, Int, enum Route) tanımlar ve .navigationDestination aracılığıyla hedefi kaydedersiniz. NavigationLink yalnızca değeri yığına koyar ve SwiftUI basıldığında hedef View'i oluşturur.

struct CatalogView: View {
    let categories: [String]

    var body: some View {
        List(categories, id: \.self) { category in
            NavigationLink(value: category) {
                Text(category)
            }
        }
        .navigationDestination(for: String.self) { category in
            CategoryView(name: category)
        }
    }
}

// Programmatic navigation:
struct DeepLinkView: View {
    @State private var path: [AppRoute] = []

    var body: some View {
        NavigationStack(path: $path) {
            HomeView()
                .navigationDestination(for: AppRoute.self) { route in
                    switch route {
                    case .detail(let id): DetailView(id: id)
                    case .settings: SettingsView()
                    }
                }
                .toolbar {
                    Button("Open Settings") {
                        path.append(AppRoute.settings)
                    }
                }
        }
    }
}

Programlı navigasyon: yola bir değer eklemek (path.append aracılığıyla), aynı değere sahip bir NavigationLink'e basmakla eşdeğerdir. Bu, ViewModel, Coordinator veya push bildirimlerine yanıt olarak navigasyon uygulamaya olanak tanır.

IsActive biçimi (NavigationLink(isActive:destination:label:)) uyumluluk için mevcuttur ancak iOS 16+'da önerilmez. Bir yol dizisi veya NavigationPath'e Binding ile value biçimini kullanın.

List'te NavigationLink: özellikler

List'te NavigationLink, satırın sağ tarafında otomatik olarak bir açıklama göstergesi (chevron) görüntüler ve kullanıcıya basmanın başka bir ekrana götüreceğini belirtir. List, ok görüntülemeyi otomatik olarak yönetir — bir listenin dışındaki normal bir NavigationLink'in aksine, ok bulunmaz.

iOS 16 ile NavigationLink içeren List, List(data:rowContent:) içinde otomatik olarak value biçimini kullanır. List içinde ForEach kullanıldığında, açıklama göstergesi de otomatik olarak eklenir. Bu davranış değiştiriciler aracılığıyla devre dışı bırakılamaz — oku kaldırmanın tek yolu NavigationLink'i Button ile değiştirmektir.

List'te destination biçimi sorunu: List içinde NavigationLink(destination:label:) kullanırsanız, kullanıcı bağlantıya tıklamış olsun ya da olmasın, tüm hedef View'ler liste yüklenirken hemen oluşturulur. Çok sayıda satırı olan listeler için bu, ilk yüklemeyi önemli ölçüde yavaşlatabilir ve bellek tüketimini artırabilir. NavigationStack ile value biçimi bu sorunu çözer.

WWDC 2022 (Session 10054)'e göre Apple, yeni projeler için NavigationStack ve NavigationLink'in value biçimini kullanmayı önerir. Bu, satır sayısının fazla olabileceği dinamik verilere sahip List için özellikle önemlidir.

NavigationLink kullanım desenleri

Desen 1: Özel NavigationLink görünümü. NavigationLink, herhangi bir View'i etiket olarak kabul eder ve bağlantı için özel tasarımlar oluşturmaya olanak tanır. List içinde bu özellikle kullanışlıdır — NavigationLink kullanırken otomatik açıklama göstergesi alırsınız.

NavigationLink(value: ProductRoute.detail(product)) {
    HStack {
        AsyncImage(url: product.imageURL)
            .frame(width: 60, height: 60)
        VStack(alignment: .leading) {
            Text(product.name).font(.headline)
            Text(product.price) .foregroundColor(.secondary)
        }
    }
    .padding(8)
}

Desen 2: Oksuz NavigationLink (özel düğme). Açıklama göstergesine ihtiyacınız yoksa, programlı navigasyon için Button kullanın: path.append(value). Bu, NavigationLink'in doğal görünmediği özel arayüz öğeleri için kullanışlıdır.

Desen 3: Koşullu navigasyon. Boş bir destination kullanarak veya belirli değerler için .navigationDestination eklemeyerek NavigationLink'i engelleyebilirsiniz. Yol aracılığıyla programlı navigasyon, bir değer eklemeden önce koşulları kontrol etmeye olanak tanır.

Hacking with Swift (2024)'e göre NavigationLink ile ilgili sorunların çoğu, eski projelerde destination biçiminin kullanımıyla ilgilidir. NavigationStack'e geçiş yaparken, tüm NavigationLink(destination:label:) ifadelerini NavigationLink(value:label:) ile değiştirin ve kök düzeyinde .navigationDestination ekleyin.