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 (список) і деталі. На iPhone sidebar прихований, показуючи лише деталі через NavigationLink. На iPad sidebar і деталі відображаються одночасно в режимі 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 classes.