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-у у landscape режиму — split. Програмер не мора да пише посебан код за различите size class-ове.