NavigationView: βασικά, στοίβα πλοήγησης σε εφαρμογές SwiftUI

Τι είναι το NavigationView;

NavigationView — ένα δοχείο SwiftUI που περιβάλλει μια ιεραρχία οθονών και παρέχει μια διεπαφή πλοήγησης. Μέσα στο NavigationView λειτουργεί το NavigationLink — ένα στοιχείο που όταν πατηθεί αντικαθιστά την τρέχουσα οθόνη με μια νέα. Το NavigationView προσθέτει αυτόματα navigation bar με τίτλο και κουμπί «Πίσω».

Το NavigationView εμφανίστηκε στο iOS 13 μαζί με το SwiftUI. Εννοιολογικά αντικαθιστά το UINavigationController από το UIKit, αλλά υλοποιείται δηλωτικά. Αντί για χειροκίνητο push/pop, ο προγραμματιστής περιγράφει τη σύνδεση μεταξύ οθονών μέσω του NavigationLink. Το σύστημα διαχειρίζεται αυτόματα τη στοίβα.

NavigationView υποστηρίζει τους τροποποιητές .navigationTitle, .navigationBarTitleDisplayMode, .toolbar και .searchable. Για iOS 16+, η Apple εισήγαγε το NavigationStack, το οποίο διατηρεί το API του NavigationView αλλά προσθέτει προγραμματισμένη διαχείριση στοίβας μέσω του NavigationPath. Για έργα που υποστηρίζουν iOS 15 και παλαιότερα, το NavigationView παραμένει η μόνη επιλογή.

NavigationLink και μεταβάσεις μεταξύ οθονών

NavigationLink — ένα στοιχείο SwiftUI που δημιουργεί μετάβαση στην οθόνη-στόχο εντός του NavigationView ή του NavigationStack. Όταν πατηθεί το NavigationLink, το σύστημα προσθέτει την οθόνη-στόχο στη στοίβα πλοήγησης. Η κίνηση μετάβασης — τυπικό push από τα δεξιά για iOS, προσαρμόζεται στην πλατφόρμα.

struct ContentView: View {
    var body: some View {
        NavigationView {
            List(items) { item in
                NavigationLink(destination: DetailView(item: item)) {
                    Text(item.title)
                }
            }
            .navigationTitle("Λίστα")
        }
    }
}

struct DetailView: View {
    let item: Item

    var body: some View {
        VStack {
            Text(item.description)
                .navigationTitle(item.title)
                .navigationBarTitleDisplayMode(.inline)
        }
    }
}

Το NavigationLink δέχεται δύο παραμέτρους: destination — το View-στόχος, και label — το στοιχείο στο οποίο κάνει κλικ ο χρήστης. Για λίστες, η σύνταξη με value και NavigationLink(value:) είναι βολική, η οποία αποεπιλέγει αυτόματα το κελί και λειτουργεί με το NavigationPath.

NavigationStack vs NavigationView: σύγκριση API

Από το iOS 16, η Apple παρουσίασε το NavigationStack ως αντικαταστάτη του NavigationView. Το NavigationStack διατηρεί τη δηλωτική σύνταξη, αλλά προσθέτει μια κρίσιμη δυνατότητα — προγραμματισμένη διαχείριση στοίβας μέσω της ιδιότητας path τύπου NavigationPath ή πίνακα Hashable.

Για έργα με ελάχιστη έκδοση iOS 16+ χρησιμοποιήστε NavigationStack. Για υποστήριξη iOS 14-15 — NavigationView. Το NavigationStack δεν έχει άμεσα ανάλογα για παλιές εκδόσεις, επομένως η αναβάθμιση απαιτεί έλεγχο συμβατότητας.

Toolbar και ρύθμιση navigationTitle

Οι τροποποιητές .toolbar και .navigationTitle διαχειρίζονται το περιεχόμενο της γραμμής πλοήγησης. Το .navigationTitle ορίζει τον τίτλο της οθόνης, το .navigationBarTitleDisplayMode επιλέγει στυλ: .large (μεγάλο, προεπιλογή) ή .inline (συμπαγές, όπως στις Ρυθμίσεις). Το .toolbar προσθέτει κουμπιά, αναζήτηση και τμηματικό έλεγχο.

struct SettingsView: View {
    var body: some View {
        NavigationStack {
            Form {
                Section("Προφίλ") {
                    Text("Όνομα χρήστη")
                    Toggle("Ειδοποιήσεις", isOn: $notifications)
                }
            }
            .navigationTitle("Ρυθμίσεις")
            .navigationBarTitleDisplayMode(.large)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Αποθήκευση") { save() }
                }
                ToolbarItem(placement: .navigationBarLeading) {
                    EditButton()
                }
            }
        }
    }
}

.searchable — ένας ακόμη τροποποιητής που ενσωματώνει τη γραμμή αναζήτησης στο navigation bar. Λειτουργεί τόσο με NavigationView όσο και με NavigationStack. Η αναζήτηση κρύβεται αυτόματα κατά την κύλιση και εμφανίζεται με σάρωση προς τα κάτω. Υποστηρίζει φιλτράρισμα λίστας μέσω Binding String.

Προγραμματισμένη πλοήγηση με NavigationPath

NavigationPath — ένας τύπος iOS 16+ που αντιπροσωπεύει τη στοίβα πλοήγησης ως συλλογή Hashable τιμών. Ο προγραμματιστής προσθέτει στοιχεία στο path για προγραμματισμένη μετάβαση, τα αφαιρεί για επιστροφή. Το NavigationPath υποστηρίζει deep links, push ειδοποιήσεις και επαναφορά κατάστασης.

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

    var body: some View {
        NavigationStack(path: $path) {
            List(categories) { category in
                NavigationLink("Κατηγορία \(category.name)",
                               value: category)
            }
            .navigationTitle("Κατηγορίες")
            .navigationDestination(for: Category.self) { category in
                ProductListView(category: category)
            }
            .navigationDestination(for: Product.self) { product in
                ProductDetailView(product: product)
            }
        }

        // Προγραμματισμένη μετάβαση μέσω deep link
        .onOpenURL { url in
            guard let productId = DeepLinkParser.parse(url) else { return }
            path.append(Product(id: productId))
        }
    }
}

.navigationDestination(for:) καταχωρεί τον τύπο δεδομένων για τον οποίο πρέπει να εμφανιστεί μια οθόνη. Όταν μια τιμή αυτού του τύπου προστίθεται στο path, το σύστημα δημιουργεί αυτόματα το View-στόχο. Αυτή η προσέγγιση αντικαθιστά το ρητό NavigationLink(destination:) και καθιστά την πλοήγηση αυστηρά τυποποιημένη.

NavigationView σε iPad, watchOS και tvOS

NavigationView και NavigationStack λειτουργούν σε όλες τις πλατφόρμες Apple: iOS, iPadOS, watchOS, tvOS και macOS. Η συμπεριφορά προσαρμόζεται στην οθόνη. Στο iPad, το NavigationStack υποστηρίζει το NavigationSplitView, το οποίο αντικαθιστά το UISplitViewController από το UIKit και εμφανίζει δύο στήλες σε ευρεία οθόνη.

Το NavigationSplitView (iOS 16+) χωρίζει την οθόνη σε sidebar (λίστα) και detail (λεπτομέρειες). Στο iPhone, το sidebar είναι κρυμμένο, εμφανίζοντας μόνο το detail μέσω NavigationLink. Στο iPad, το sidebar και το detail εμφανίζονται ταυτόχρονα σε λειτουργία split.

struct AdaptiveNavigation: View {
    @State private var selectedCategory: Category?

    var body: some View {
        NavigationSplitView {
            List(categories, selection: $selectedCategory) { category in
                Text(category.name)
            }
            .navigationTitle("Κατηγορίες")
        } detail: {
            ProductListView(category: selectedCategory)
        }
    }
}

Το NavigationSplitView επιλέγει αυτόματα τη βέλτιστη λειτουργία εμφάνισης για κάθε συσκευή. Στο iPhone σε κατακόρυφη λειτουργία — στοίβα, στο iPad και iPhone σε οριζόντια λειτουργία — split. Ο προγραμματιστής δεν χρειάζεται να γράψει ξεχωριστό κώδικα για διαφορετικά size class.