NavigationStack: apa itu, tumpukan navigasi di SwiftUI

Apa itu NavigationStack di SwiftUI?

NavigationStack adalah View container yang mengimplementasikan navigasi berbasis tumpukan (LIFO). Ia mengelola riwayat transisi, memungkinkan Anda menempatkan layar baru ke tumpukan dan kembali melalui tombol sistem «Kembali» atau secara terprogram. NavigationStack adalah bagian dari SwiftUI sejak iOS 16, iPadOS 16, macOS 13, watchOS 9 dan tvOS 16.

Inovasi utama NavigationStack adalah jalur navigasi yang aman tipe. Alih-alih menunjukkan destination secara langsung saat membuat NavigationLink, Anda menempatkan nilai (value) ke dalam jalur, dan pendaftaran View tujuan dilakukan secara terpisah melalui pengubah .navigationDestination(for:destination:). Ini memisahkan navigasi dan tampilan, membuat kode lebih modular dan dapat diuji.

Menurut WWDC 2022 (Session 10054), NavigationStack menggunakan mekanisme navigasi baru yang didasarkan pada ObservableObject dan siklus hidup SwiftUI. Berbeda dengan NavigationView yang mengandalkan UINavigationController di balik layar, NavigationStack sepenuhnya diimplementasikan di SwiftUI, yang meningkatkan prediktabilitas dan kompatibilitas dengan siklus hidup SwiftUI.

Struktur dasar NavigationStack

NavigationStack menerima View root dan jalur navigasi opsional (Binding ke NavigationPath atau array nilai Hashable). Semua layar anak ditempatkan di tumpukan melalui NavigationLink atau penambahan nilai secara terprogram ke jalur.

NavigationStack vs NavigationView: perbandingan

NavigationView adalah container navigasi utama SwiftUI hingga iOS 16. Ia secara otomatis mengelola UINavigationController di balik layar, yang menyebabkan sejumlah masalah: perilaku tidak terduga saat perubahan data, kesulitan dengan navigasi terprogram, dan kurangnya keamanan tipe.

Keunggulan utama NavigationStack — navigasi aman tipe. Anda mendefinisikan jalur sebagai array tipe konkret (atau NavigationPath untuk tumpukan heterogen) dan mendaftarkan destination untuk setiap tipe. Ini menghilangkan kesalahan ketidakcocokan tipe dan membuat navigasi dapat diprediksi.

NavigationView tidak digunakan lagi di iOS 17. Apple merekomendasikan migrasi ke NavigationStack untuk semua proyek baru dan saat memperbarui versi minimum ke iOS 16.

NavigationPath: manajemen tumpukan aman tipe

NavigationPath adalah tipe yang mewakili jalur navigasi di NavigationStack. Ia dapat menyimpan nilai heterogen (AnyHashable) atau digunakan dengan tipe konkret melalui Binding ke array [T: Hashable]. NavigationPath secara otomatis dikodekan dan didekodekan untuk mempertahankan status.

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")
    }
}

Tumpukan heterogen: NavigationPath dapat berisi nilai dari tipe yang berbeda jika mereka mengimplementasikan Hashable. Misalnya, layar pertama dapat menerima String (ID), kedua — Int (nomor), ketiga — enum Route kustom. Untuk menampilkan setiap tipe, .navigationDestination terpisah didaftarkan.

Dukungan Codable: NavigationPath mengimplementasikan Codable jika semua nilai di jalur juga Codable + Hashable. Ini memungkinkan menyimpan dan memulihkan status navigasi saat memulai ulang aplikasi atau beralih ke latar belakang.

NavigationDestination: pendaftaran layar tujuan

.navigationDestination(for:destination:) — pengubah yang mendaftarkan View tujuan untuk tipe data tertentu. Ketika NavigationLink menempatkan nilai dari tipe ini ke dalam jalur, SwiftUI secara otomatis menemukan .navigationDestination yang sesuai dan membuat layar.

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"))

Aturan penting: .navigationDestination harus diterapkan ke View yang berada di dalam NavigationStack, dan sebelum NavigationLink menempatkan nilai ke dalam jalur. Biasanya ditambahkan ke View root atau ke container bagian. Jika .navigationDestination tidak ditemukan untuk tipe nilai, transisi tidak akan terjadi.

Menurut SwiftUI Engineering (2023), .navigationDestination dapat didaftarkan di berbagai tingkat hierarki. SwiftUI mencari destination terdekat yang cocok saat mencoba navigasi. Ini memungkinkan penimpaan destination untuk satu tipe di berbagai bagian aplikasi.

Pola penggunaan NavigationStack

Pola 1: navigasi melalui enum Route. Definisikan enum dengan nilai terkait untuk semua layar aplikasi. Gunakan satu .navigationDestination untuk AppRoute dan switch untuk routing. Ini menyediakan satu sumber kebenaran untuk semua kemungkinan transisi dalam aplikasi.

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)
}

Pola 2: navigasi terprogram dan deep linking. NavigationStack memungkinkan manajemen tumpukan secara terprogram: menambah, menghapus layar dan kembali ke root. Ini diperlukan untuk notifikasi push, tautan dalam, dan pemulihan navigasi setelah restart.

Pola 3: array tipe sebagai pengganti NavigationPath. Jika semua layar menggunakan satu tipe (misalnya, String atau enum kustom), gunakan Binding ke [T]. Ini memberikan tipifikasi yang lebih ketat dan kinerja yang lebih baik daripada NavigationPath. NavigationPath dibenarkan untuk tumpukan heterogen dengan tipe layar yang berbeda.

Menurut Point-Free (2024), NavigationStack dengan enum Route adalah cara yang lebih disukai untuk mengatur navigasi di aplikasi SwiftUI. Ini membuat semua kemungkinan transisi eksplisit, aman tipe, dan dapat diuji, yang sangat penting untuk proyek besar dengan puluhan layar.