NavigationLink — τι είναι, κουμπί μετάβασης στο SwiftUI

Τι είναι το NavigationLink στο SwiftUI;

NavigationLink είναι ένα View που όταν πατηθεί ξεκινά μια μετάβαση πλοήγησης. Μέσα στο NavigationStack, το πάτημα του NavigationLink τοποθετεί την οθόνη-στόχο στη στοίβα και εμφανίζει το κουμπί συστήματος “Πίσω”. Το NavigationLink υπάρχει από το iOS 13 και είναι ο κύριος τρόπος πλοήγησης χρηστών στο SwiftUI.

Το NavigationLink δεν κληρονομεί από το UIButton — είναι ένα SwiftUI View που προσαρμόζεται αυτόματα στο περιβάλλον. Μέσα σε List, το NavigationLink εμφανίζεται με δείκτη αποκάλυψης (disclosure indicator). Εκτός λίστας, το NavigationLink συμπεριφέρεται ως κανονικό κουμπί, αλλά με συμπεριφορά πλοήγησης.

Σύμφωνα με το SwiftUI Lab (2024), το NavigationLink είναι ένα από τα πιο συχνά χρησιμοποιούμενα View σε εφαρμογές SwiftUI, πίσω μόνο από Text, Image και VStack. Η κατανόηση των διαφορών μεταξύ των μορφών αρχικοποίησης είναι κρίσιμη για την απόδοση και την προβλέψιμη συμπεριφορά πλοήγησης.

Πώς λειτουργεί το NavigationLink κάτω από το καπό

Όταν πατηθεί, το NavigationLink προσθέτει μια τιμή (ή destination) στη στοίβα πλοήγησης που σχετίζεται με το πλησιέστερο NavigationStack ή NavigationView. Το SwiftUI χρησιμοποιεί το EnvironmentValue για τη μεταφορά της διαδρομής πλοήγησης μέσω της ιεραρχίας View. Το NavigationLink διαβάζει αυτή τη διαδρομή από το Environment και την τροποποιεί όταν πατηθεί.

Μορφές αρχικοποίησης του NavigationLink

NavigationLink έχει δύο κύριες μορφές: με destination (άμεση αναφορά του View-στόχου) και με value (τιμή για NavigationDestination). Η επιλογή μορφής εξαρτάται από την έκδοση iOS και την αρχιτεκτονική πλοήγησης.

Μορφή Destination (iOS 13+): NavigationLink(destination: DetailView(), label: { Text(“Open”) }). Αυτή η μορφή δημιουργεί το DetailView αμέσως κατά την απόδοση του NavigationLink, ακόμα κι αν ο χρήστης δεν έχει κάνει κλικ στο σύνδεσμο. Αυτό οδηγεί σε πρόωρη αρχικοποίηση του View και πιθανά προβλήματα απόδοσης, εάν το View-στόχος εκτελεί βαριές λειτουργίες στον αρχικοποιητή.

Μορφή Value (iOS 16+): NavigationLink(value: “detail_42”, label: { Text(“Open”) }). Το View-στόχος δημιουργείται μόνο όταν γίνει κλικ στο σύνδεσμο, όταν το SwiftUI βρει το αντίστοιχο .navigationDestination. Αυτό αποτρέπει την πρόωρη αρχικοποίηση και καθιστά την πλοήγηση πιο προβλέψιμη.

NavigationLink με NavigationStack: σωστή χρήση

NavigationLink με NavigationStack στο iOS 16+ απαιτεί μετάβαση στη μορφή value. Ορίζετε τον τύπο δεδομένων για πλοήγηση (String, Int, enum Route) και καταχωρείτε το destination μέσω .navigationDestination. Το NavigationLink τοποθετεί στη στοίβα μόνο την τιμή και το SwiftUI δημιουργεί το View-στόχο όταν πατηθεί.

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

// Προγραμματική πλοήγηση:
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("Άνοιγμα Ρυθμίσεων") {
                        path.append(AppRoute.settings)
                    }
                }
        }
    }
}

Προγραμματική πλοήγηση: η προσθήκη τιμής στο path (μέσω path.append) ισοδυναμεί με πάτημα του NavigationLink με την ίδια τιμή. Αυτό επιτρέπει την υλοποίηση πλοήγησης από ViewModel, Coordinator ή ως απάντηση σε ειδοποιήσεις push.

Μορφή IsActive (NavigationLink(isActive:destination:label:)) είναι διαθέσιμη για συμβατότητα, αλλά δεν συνιστάται σε iOS 16+. Χρησιμοποιήστε τη μορφή value με Binding σε πίνακα διαδρομής ή NavigationPath.

NavigationLink σε List: χαρακτηριστικά

NavigationLink σε List εμφανίζει αυτόματα ένα βέλος αποκάλυψης (chevron) στη δεξιά πλευρά της γραμμής, σηματοδοτώντας στον χρήστη ότι το πάτημα θα οδηγήσει σε άλλη οθόνη. Η List διαχειρίζεται αυτόματα την εμφάνιση του βέλους — σε αντίθεση με το κανονικό NavigationLink εκτός λίστας, όπου δεν υπάρχει βέλος.

Από το iOS 16, η List με NavigationLink χρησιμοποιεί αυτόματα τη μορφή value μέσα σε List(data:rowContent:). Κατά τη χρήση του ForEach μέσα σε List, το βέλος αποκάλυψης προστίθεται επίσης αυτόματα. Αυτή η συμπεριφορά δεν μπορεί να απενεργοποιηθεί μέσω τροποποιητών — μόνο η αντικατάσταση του NavigationLink με Button μπορεί να αφαιρέσει το βέλος.

Πρόβλημα με τη μορφή destination σε List: εάν χρησιμοποιείτε NavigationLink(destination:label:) μέσα σε List, όλα τα View-στόχοι δημιουργούνται αμέσως κατά τη φόρτωση της λίστας, ανεξάρτητα από το αν ο χρήστης έκανε κλικ στο σύνδεσμο ή όχι. Για λίστες με μεγάλο αριθμό γραμμών, αυτό μπορεί να επιβραδύνει σημαντικά την αρχική φόρτωση και να αυξήσει την κατανάλωση μνήμης. Η μορφή value με NavigationStack λύνει αυτό το πρόβλημα.

Σύμφωνα με το WWDC 2022 (Session 10054), η Apple συνιστά τη χρήση του NavigationStack και της μορφής value του NavigationLink για νέα έργα. Αυτό είναι ιδιαίτερα σημαντικό για List με δυναμικά δεδομένα, όπου ο αριθμός γραμμών μπορεί να είναι μεγάλος.

Μοτίβα χρήσης του NavigationLink

Μοτίβο 1: προσαρμοσμένη εμφάνιση NavigationLink. Το NavigationLink δέχεται οποιοδήποτε View ως label, επιτρέποντας τη δημιουργία οποιουδήποτε σχεδιασμού για το σύνδεσμο. Μέσα σε List, αυτό είναι ιδιαίτερα βολικό — λαμβάνετε αυτόματα το βέλος αποκάλυψης όταν χρησιμοποιείτε 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)
}

Μοτίβο 2: NavigationLink χωρίς βέλος (προσαρμοσμένο κουμπί). Εάν δεν χρειάζεστε το βέλος αποκάλυψης, χρησιμοποιήστε Button για προγραμματική πλοήγηση: path.append(value). Αυτό είναι χρήσιμο για προσαρμοσμένα στοιχεία διεπαφής όπου το NavigationLink φαίνεται αφύσικο.

Μοτίβο 3: υπό όρους πλοήγηση. Μπορείτε να μπλοκάρετε το NavigationLink χρησιμοποιώντας κενό destination ή μη προσθέτοντας .navigationDestination για συγκεκριμένες τιμές. Η προγραμματική πλοήγηση μέσω path επιτρέπει τον έλεγχο συνθηκών πριν από την προσθήκη τιμής.

Σύμφωνα με το Hacking with Swift (2024), τα περισσότερα προβλήματα με το NavigationLink σχετίζονται με τη χρήση της μορφής destination σε παλαιότερα έργα. Κατά τη μετεγκατάσταση σε NavigationStack, αντικαταστήστε όλα τα NavigationLink(destination:label:) με NavigationLink(value:label:) και προσθέστε .navigationDestination στο ριζικό επίπεδο.