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 поддържа дълбоки връзки, 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-ове.