NavigationView: alapok, navigációs verem SwiftUI alkalmazásokban

Mi az a NavigationView?

NavigationView — egy SwiftUI konténer, amely beburkolja a képernyők hierarchiáját és navigációs felületet biztosít. A NavigationView-n belül a NavigationLink működik — egy elem, amely megnyomásakor az aktuális képernyőt egy újra cseréli. A NavigationView automatikusan hozzáad egy navigation bar-t címmel és «Vissza» gombbal.

A NavigationView az iOS 13-ban jelent meg a SwiftUI-val együtt. Fogalmilag helyettesíti az UIKit-ből származó UINavigationController-t, de deklaratív módon van implementálva. A kézi push/pop helyett a fejlesztő a NavigationLink segítségével írja le a képernyők közötti kapcsolatot. A rendszer automatikusan kezeli a vermet.

NavigationView támogatja a .navigationTitle, .navigationBarTitleDisplayMode, .toolbar és .searchable módosítókat. Az iOS 16+ számára az Apple bevezette a NavigationStack-et, amely megtartja a NavigationView API-ját, de programozott veremkezelést ad hozzá a NavigationPath segítségével. Az iOS 15-öt és régebbit támogató projektek számára a NavigationView marad az egyetlen lehetőség.

NavigationLink és átmenetek a képernyők között

NavigationLink — egy SwiftUI elem, amely átmenetet hoz létre a célképernyőre a NavigationView vagy NavigationStack belsejében. A NavigationLink megnyomásakor a rendszer hozzáadja a célképernyőt a navigációs veremhez. Az átmenet animációja — szabványos push jobbról iOS esetén, alkalmazkodik a platformhoz.

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

struct DetailView: View {
    let item: Item

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

A NavigationLink két paramétert fogad: destination — a cél View, és label — az elem, amelyre a felhasználó kattint. Listák esetén a value és NavigationLink(value:) szintaxis kényelmes, amely automatikusan kijelöli a cellát és együttműködik a NavigationPath-pal.

NavigationStack vs NavigationView: API összehasonlítás

Az iOS 16-tól kezdve az Apple bemutatta a NavigationStack-et a NavigationView helyettesítőjeként. A NavigationStack megtartja a deklaratív szintaxist, de hozzáad egy kritikus képességet — a verem programozott kezelését a NavigationPath típusú path tulajdonság vagy egy Hashable tömb segítségével.

Az iOS 16+ minimális verziójú projektekhez használja a NavigationStack-et. Az iOS 14-15 támogatásához — NavigationView. A NavigationStack-nek nincs közvetlen analógja a régi verziókhoz, ezért a frissítés kompatibilitási ellenőrzést igényel.

Toolbar és navigationTitle beállítása

A .toolbar és .navigationTitle módosítók kezelik a navigációs sáv tartalmát. A .navigationTitle beállítja a képernyő címét, a .navigationBarTitleDisplayMode kiválasztja a stílust: .large (nagy, alapértelmezett) vagy .inline (kompakt, mint a Beállításokban). A .toolbar gombokat, keresést és szegmentált vezérlést ad hozzá.

struct SettingsView: View {
    var body: some View {
        NavigationStack {
            Form {
                Section("Profil") {
                    Text("Felhasználónév")
                    Toggle("Értesítések", isOn: $notifications)
                }
            }
            .navigationTitle("Beállítások")
            .navigationBarTitleDisplayMode(.large)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Mentés") { save() }
                }
                ToolbarItem(placement: .navigationBarLeading) {
                    EditButton()
                }
            }
        }
    }
}

.searchable — egy másik módosító, amely integrálja a keresősávot a navigation bar-ba. Mind a NavigationView-val, mind a NavigationStack-kel működik. A keresés automatikusan elrejtőzik görgetéskor és megjelenik lefelé húzáskor. Támogatja a lista szűrését Binding String segítségével.

Programozott navigáció NavigationPath segítségével

NavigationPath — egy iOS 16+ típus, amely a navigációs vermet Hashable értékek gyűjteményeként reprezentálja. A fejlesztő elemeket ad hozzá a path-hoz a programozott átmenethez, eltávolítja őket a visszatéréshez. A NavigationPath támogatja a mély linkeket, push értesítéseket és állapot-visszaállítást.

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

    var body: some View {
        NavigationStack(path: $path) {
            List(categories) { category in
                NavigationLink("Kategória \(category.name)",
                               value: category)
            }
            .navigationTitle("Kategóriák")
            .navigationDestination(for: Category.self) { category in
                ProductListView(category: category)
            }
            .navigationDestination(for: Product.self) { product in
                ProductDetailView(product: product)
            }
        }

        // Programozott átmenet deep link segítségével
        .onOpenURL { url in
            guard let productId = DeepLinkParser.parse(url) else { return }
            path.append(Product(id: productId))
        }
    }
}

.navigationDestination(for:) regisztrálja az adattípust, amelyhez meg kell jeleníteni egy képernyőt. Amikor egy ilyen típusú érték kerül a path-ba, a rendszer automatikusan létrehozza a cél View-t. Ez a megközelítés helyettesíti az explicit NavigationLink(destination:) hívást és szigorúan tipizált navigációt tesz lehetővé.

NavigationView iPad, watchOS és tvOS rendszeren

NavigationView és NavigationStack az összes Apple platformon működik: iOS, iPadOS, watchOS, tvOS és macOS. A viselkedés alkalmazkodik a képernyőhöz. iPad-en a NavigationStack támogatja a NavigationSplitView-t, amely helyettesíti az UIKit-ből származó UISplitViewController-t és két oszlopot jelenít meg széles képernyőn.

A NavigationSplitView (iOS 16+) felosztja a képernyőt sidebar-ra (lista) és detail-re (részletek). iPhone-on a sidebar el van rejtve, csak a detail jelenik meg a NavigationLink segítségével. iPad-en a sidebar és a detail egyszerre jelenik meg split módban.

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

    var body: some View {
        NavigationSplitView {
            List(categories, selection: $selectedCategory) { category in
                Text(category.name)
            }
            .navigationTitle("Kategóriák")
        } detail: {
            ProductListView(category: selectedCategory)
        }
    }
}

A NavigationSplitView automatikusan kiválasztja az optimális megjelenítési módot minden eszközhöz. iPhone-on portré módban — verem, iPad-en és iPhone-on fekvő módban — split. A fejlesztőnek nem kell külön kódot írnia a különböző size class-okhoz.