NavigationStack: ano ito, navigation stack sa SwiftUI

Ano ang NavigationStack sa SwiftUI?

NavigationStack ay isang container View na nagpapatupad ng navigation batay sa stack (LIFO). Pinamamahalaan nito ang kasaysayan ng mga transition, na nagpapahintulot sa iyo na maglagay ng mga bagong screen sa stack at bumalik sa pamamagitan ng system button «Bumalik» o programmatically. Ang NavigationStack ay bahagi ng SwiftUI simula sa iOS 16, iPadOS 16, macOS 13, watchOS 9 at tvOS 16.

Ang pangunahing inobasyon ng NavigationStack ay ang type-safe na navigation path. Sa halip na direktang ituro ang destination kapag gumagawa ng NavigationLink, naglalagay ka ng value sa path, at ang pagrerehistro ng target na View ay hiwalay na ginagawa sa pamamagitan ng modifier na .navigationDestination(for:destination:). Pinaghihiwalay nito ang navigation at display, ginagawang mas modular at testable ang code.

Ayon sa WWDC 2022 (Session 10054), gumagamit ang NavigationStack ng bagong mekanismo ng navigation batay sa ObservableObject at SwiftUI lifecycle. Hindi tulad ng NavigationView na umaasa sa UINavigationController sa ilalim ng hood, ang NavigationStack ay ganap na ipinatupad sa SwiftUI, na nagpapabuti sa predictability at compatibility sa SwiftUI lifecycle.

Pangunahing istraktura ng NavigationStack

Tumatanggap ang NavigationStack ng root View at opsyonal na navigation path (Binding sa NavigationPath o array ng Hashable values). Lahat ng child screen ay inilalagay sa stack sa pamamagitan ng NavigationLink o programmatic na pagdaragdag ng mga value sa path.

NavigationStack vs NavigationView: paghahambing

NavigationView ay ang pangunahing navigation container ng SwiftUI hanggang iOS 16. Awtomatiko nitong pinamamahalaan ang UINavigationController sa ilalim ng hood, na nagdulot ng ilang problema: hindi inaasahang pag-uugali kapag nagbago ang data, kahirapan sa programmatic navigation, at kakulangan ng type safety.

Pangunahing bentahe ng NavigationStack — type-safe navigation. Tinutukoy mo ang path bilang array ng mga konkretong uri (o NavigationPath para sa heterogenous stacks) at nagrerehistro ng destination para sa bawat uri. Tinatanggal nito ang mga error sa hindi pagtutugma ng uri at ginagawang predictable ang navigation.

Ang NavigationView ay deprecated sa iOS 17. Inirerekomenda ng Apple ang paglipat sa NavigationStack para sa lahat ng bagong proyekto at kapag nag-a-update ng minimum na bersyon sa iOS 16.

NavigationPath: type-safe na pamamahala ng stack

NavigationPath ay isang uri na kumakatawan sa navigation path sa NavigationStack. Maaari itong mag-imbak ng heterogenous values (AnyHashable) o gamitin sa isang konkretong uri sa pamamagitan ng Binding sa array [T: Hashable]. Ang NavigationPath ay awtomatikong nag-e-encode at nagde-decode para mapanatili ang estado.

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

    var body: some View {
        NavigationStack(path: $path) {
            HomeView()
                .navigationDestination(for: String.self) { value in
                    DetailView(id: value)
                }
                .navigationDestination(for: Int.self) { value in
                    NumberView(number: value)
                }
        }
    }

    func goToRoot() {
        path.removeLast(path.count)
    }

    func pushDeepLink() {
        path.append("detail_42")
    }
}

Heterogenous stack: Maaaring maglaman ang NavigationPath ng mga value ng iba't ibang uri kung nagpapatupad sila ng Hashable. Halimbawa, ang unang screen ay maaaring tumanggap ng String (ID), pangalawa — Int (numero), pangatlo — custom na enum Route. Para sa pagpapakita ng bawat uri, isang hiwalay na .navigationDestination ang nirerehistro.

Suporta sa Codable: Ipinapatupad ng NavigationPath ang Codable kung ang lahat ng value sa path ay Codable + Hashable din. Pinapayagan nito ang pag-save at pag-restore ng estado ng navigation kapag nag-restart ng app o lumipat sa background.

NavigationDestination: pagrerehistro ng target na screen

.navigationDestination(for:destination:) — isang modifier na nagrerehistro ng target na View para sa isang partikular na uri ng data. Kapag naglagay ang NavigationLink ng value ng uri na ito sa path, awtomatikong hahanapin ng SwiftUI ang kaukulang .navigationDestination at gagawa ng screen.

enum AppRoute: Hashable {
    case profile(UserID)
    case settings
    case about
}

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

    var body: some View {
        NavigationStack(path: $path) {
            HomeView()
                .navigationDestination(for: AppRoute.self) { route in
                    switch route {
                    case .profile(let id):
                        ProfileView(userId: id)
                    case .settings:
                        SettingsView()
                    case .about:
                        AboutView()
                    }
                }
        }
    }
}

// Navigate: path.append(AppRoute.profile("user_123"))

Mahalagang tuntunin: Ang .navigationDestination ay dapat ilapat sa View na nasa loob ng NavigationStack, at bago maglagay ang NavigationLink ng value sa path. Karaniwan itong idinadagdag sa root View o sa container ng section. Kung hindi mahanap ang .navigationDestination para sa uri ng value, hindi magaganap ang transition.

Ayon sa SwiftUI Engineering (2023), ang .navigationDestination ay maaaring irehistro sa iba't ibang antas ng hierarchy. Hinahanap ng SwiftUI ang pinakamalapit na angkop na destination kapag nagtatangkang mag-navigate. Pinapayagan nito ang pag-override ng destination para sa isang uri sa iba't ibang bahagi ng app.

Mga pattern ng paggamit ng NavigationStack

Pattern 1: navigation sa pamamagitan ng enum Route. Tukuyin ang isang enum na may kaugnay na value para sa lahat ng screen ng app. Gumamit ng isang .navigationDestination para sa AppRoute at switch para sa routing. Nagbibigay ito ng iisang source of truth para sa lahat ng posibleng transition sa app.

struct StoreView: View {
    @State private var path: [ProductRoute] = []

    var body: some View {
        NavigationStack(path: $path) {
            ProductGrid()
                .navigationDestination(for: ProductRoute.self) { route in
                    switch route {
                    case .detail(let product):
                        ProductDetail(product: product)
                    case .reviews(let productId):
                        ReviewsView(productId: productId)
                    }
                }
        }
    }
}

enum ProductRoute: Hashable {
    case detail(Product)
    case reviews(String)
}

Pattern 2: programmatic navigation at deep linking. Pinapayagan ng NavigationStack ang programmatic na pamamahala ng stack: pagdaragdag, pag-alis ng mga screen at pagbabalik sa root. Ito ay kinakailangan para sa push notification, deep link, at pag-restore ng navigation pagkatapos mag-restart.

Pattern 3: array ng mga uri sa halip na NavigationPath. Kung ang lahat ng screen ay gumagamit ng isang uri (hal. String o custom na enum), gumamit ng Binding sa [T]. Nagbibigay ito ng mas mahigpit na typification at mas mahusay na performance kaysa sa NavigationPath. Ang NavigationPath ay nabibigyang-katwiran para sa heterogenous stacks na may iba't ibang uri ng screen.

Ayon sa Point-Free (2024), ang NavigationStack na may enum Route ay ang ginustong paraan ng pag-oorganisa ng navigation sa mga SwiftUI app. Ginagawa nitong tahasan, type-safe at testable ang lahat ng posibleng transition, na lalong mahalaga para sa malalaking proyekto na may dose-dosenang screen.