NavigationLink — ce este, butonul de tranziție în SwiftUI

Ce este NavigationLink în SwiftUI?

NavigationLink este un View care, la apăsare, inițiază o tranziție de navigare. În interiorul NavigationStack, apăsarea NavigationLink plasează ecranul țintă pe stivă și afișează butonul de sistem „Înapoi”. NavigationLink există din iOS 13 și este principala modalitate de navigare a utilizatorului în SwiftUI.

NavigationLink nu moștenește de la UIButton — este un View SwiftUI care se adaptează automat la context. În interiorul List, NavigationLink se afișează cu un indicator de dezvăluire (disclosure indicator). În afara listei, NavigationLink se comportă ca un buton obișnuit, dar cu comportament de navigare.

Conform SwiftUI Lab (2024), NavigationLink este unul dintre cele mai utilizate View-uri în aplicațiile SwiftUI, fiind depășit doar de Text, Image și VStack. Înțelegerea diferențelor dintre formele de inițializare este critică pentru performanță și un comportament previzibil al navigării.

Cum funcționează NavigationLink sub capotă

La apăsare, NavigationLink adaugă o valoare (sau destination) în stiva de navigare asociată cu cel mai apropiat NavigationStack sau NavigationView. SwiftUI utilizează EnvironmentValue pentru a transmite calea de navigare prin ierarhia View. NavigationLink citește această cale din Environment și o modifică la apăsare.

Formele de inițializare ale NavigationLink

NavigationLink are două forme principale: cu destination (indicarea directă a View-ului țintă) și cu value (valoare pentru NavigationDestination). Alegerea formei depinde de versiunea iOS și arhitectura navigării.

Forma Destination (iOS 13+): NavigationLink(destination: DetailView(), label: { Text(„Open”) }). Această formă creează DetailView imediat la randarea NavigationLink, chiar dacă utilizatorul nu a apăsat pe link. Aceasta duce la inițializarea prematură a View-ului și la potențiale probleme de performanță, dacă View-ul țintă execută operații grele în inițializator.

Forma Value (iOS 16+): NavigationLink(value: „detail_42”, label: { Text(„Open”) }). View-ul țintă este creat doar la apăsarea linkului, când SwiftUI găsește .navigationDestination corespunzător. Aceasta previne inițializarea prematură și face navigarea mai previzibilă.

NavigationLink cu NavigationStack: utilizarea corectă

NavigationLink cu NavigationStack în iOS 16+ necesită trecerea la forma value. Definiți tipul de date pentru navigare (String, Int, enum Route) și înregistrați destination prin .navigationDestination. NavigationLink plasează în stivă doar valoarea, iar SwiftUI creează View-ul țintă la apăsare.

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)
        }
    }
}

// Navigare programatică:
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("Deschide Setări") {
                        path.append(AppRoute.settings)
                    }
                }
        }
    }
}

Navigare programatică: adăugarea valorii în path (prin path.append) este echivalentă cu apăsarea NavigationLink cu aceeași valoare. Aceasta permite implementarea navigării din ViewModel, Coordinator sau ca răspuns la notificări push.

Forma IsActive (NavigationLink(isActive:destination:label:)) este disponibilă pentru compatibilitate, dar nu este recomandată în iOS 16+. Utilizați forma value cu Binding la un array de cale sau NavigationPath.

NavigationLink în List: particularități

NavigationLink în List afișează automat o săgeată de dezvăluire (chevron) în partea dreaptă a rândului, semnalând utilizatorului că apăsarea va duce la un alt ecran. List gestionează afișarea săgeții automat — spre deosebire de NavigationLink obișnuit în afara listei, unde nu există săgeată.

Din iOS 16, List cu NavigationLink utilizează automat forma value în interiorul List(data:rowContent:). La utilizarea ForEach în interiorul List, săgeata de dezvăluire se adaugă și ea automat. Acest comportament nu poate fi dezactivat prin modificatori — doar înlocuirea NavigationLink cu Button poate elimina săgeata.

Problemă cu forma destination în List: dacă utilizați NavigationLink(destination:label:) în interiorul List, toate View-urile destination sunt create imediat la încărcarea listei, indiferent dacă utilizatorul a apăsat sau nu pe link. Pentru liste cu un număr mare de rânduri, aceasta poate încetini semnificativ încărcarea inițială și poate crește consumul de memorie. Forma value cu NavigationStack rezolvă această problemă.

Conform WWDC 2022 (Session 10054), Apple recomandă utilizarea NavigationStack și a formei value NavigationLink pentru proiecte noi. Acest lucru este deosebit de important pentru List cu date dinamice, unde numărul de rânduri poate fi mare.

Pattern-uri de utilizare NavigationLink

Pattern 1: aspect personalizat NavigationLink. NavigationLink acceptă orice View ca label, permițând crearea unui design personalizat pentru link. În interiorul List, acest lucru este deosebit de convenabil — primiți săgeata de dezvăluire automat la utilizarea NavigationLink.

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)
}

Pattern 2: NavigationLink fără săgeată (buton personalizat). Dacă nu aveți nevoie de săgeata de dezvăluire, utilizați Button pentru navigare programatică: path.append(value). Acest lucru este util pentru elemente de interfață personalizate unde NavigationLink pare nenatural.

Pattern 3: navigare condițională. Puteți bloca NavigationLink utilizând un destination gol sau neadăugând .navigationDestination pentru anumite valori. Navigarea programatică prin path permite verificarea condițiilor înainte de a adăuga valoarea.

Conform Hacking with Swift (2024), majoritatea problemelor cu NavigationLink sunt legate de utilizarea formei destination în proiecte vechi. La migrarea la NavigationStack, înlocuiți toate NavigationLink(destination:label:) cu NavigationLink(value:label:) și adăugați .navigationDestination la nivelul rădăcină.