NavigationView: dasar, tumpukan navigasi di aplikasi SwiftUI

Apa itu NavigationView?

NavigationView — kontainer SwiftUI yang membungkus hierarki layar dan menyediakan antarmuka navigasi. Di dalam NavigationView bekerja NavigationLink — elemen yang saat ditekan mengganti layar saat ini dengan yang baru. NavigationView secara otomatis menambahkan navigation bar dengan judul dan tombol «Kembali».

NavigationView muncul di iOS 13 bersama SwiftUI. Secara konseptual menggantikan UINavigationController dari UIKit, tetapi diimplementasikan secara deklaratif. Alih-alih push/pop manual, pengembang mendeskripsikan hubungan antar layar melalui NavigationLink. Sistem secara otomatis mengelola tumpukan.

NavigationView mendukung modifier .navigationTitle, .navigationBarTitleDisplayMode, .toolbar dan .searchable. Untuk iOS 16+ Apple memperkenalkan NavigationStack, yang mempertahankan API NavigationView tetapi menambahkan manajemen tumpukan terprogram melalui NavigationPath. Untuk proyek yang mendukung iOS 15 dan lebih lama, NavigationView tetap menjadi satu-satunya pilihan.

NavigationLink dan transisi antar layar

NavigationLink — elemen SwiftUI yang membuat transisi ke layar tujuan di dalam NavigationView atau NavigationStack. Saat NavigationLink ditekan, sistem menambahkan layar tujuan ke tumpukan navigasi. Animasi transisi — push standar dari kanan untuk iOS, disesuaikan dengan platform.

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

struct DetailView: View {
    let item: Item

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

NavigationLink menerima dua parameter: destination — View tujuan, dan label — elemen yang diklik pengguna. Untuk daftar, sintaksis dengan value dan NavigationLink(value:) nyaman, yang secara otomatis membatalkan pilihan sel dan bekerja dengan NavigationPath.

NavigationStack vs NavigationView: perbandingan API

Sejak iOS 16, Apple memperkenalkan NavigationStack sebagai pengganti NavigationView. NavigationStack mempertahankan sintaksis deklaratif, tetapi menambahkan kemampuan kritis — manajemen tumpukan terprogram melalui properti path bertipe NavigationPath atau array Hashable.

Untuk proyek dengan versi minimum iOS 16+ gunakan NavigationStack. Untuk dukungan iOS 14-15 — NavigationView. NavigationStack tidak memiliki analog langsung untuk versi lama, sehingga upgrade memerlukan pemeriksaan kompatibilitas.

Toolbar dan konfigurasi navigationTitle

Modifier .toolbar dan .navigationTitle mengelola konten bilah navigasi. .navigationTitle mengatur judul layar, .navigationBarTitleDisplayMode memilih gaya: .large (besar, default) atau .inline (kompak, seperti di Pengaturan). .toolbar menambahkan tombol, pencarian, dan kontrol tersegmentasi.

struct SettingsView: View {
    var body: some View {
        NavigationStack {
            Form {
                Section("Profil") {
                    Text("Nama pengguna")
                    Toggle("Notifikasi", isOn: $notifications)
                }
            }
            .navigationTitle("Pengaturan")
            .navigationBarTitleDisplayMode(.large)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Simpan") { save() }
                }
                ToolbarItem(placement: .navigationBarLeading) {
                    EditButton()
                }
            }
        }
    }
}

.searchable — modifier lain yang mengintegrasikan bilah pencarian ke navigation bar. Bekerja baik dengan NavigationView maupun NavigationStack. Pencarian secara otomatis tersembunyi saat menggulir dan muncul saat menggeser ke bawah. Mendukung pemfilteran daftar melalui Binding String.

Navigasi terprogram dengan NavigationPath

NavigationPath — tipe iOS 16+ yang merepresentasikan tumpukan navigasi sebagai kumpulan nilai Hashable. Pengembang menambahkan elemen ke path untuk transisi terprogram, menghapusnya untuk kembali. NavigationPath mendukung tautan dalam, notifikasi push, dan pemulihan status.

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

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

        // Transisi terprogram melalui deep link
        .onOpenURL { url in
            guard let productId = DeepLinkParser.parse(url) else { return }
            path.append(Product(id: productId))
        }
    }
}

.navigationDestination(for:) mendaftarkan tipe data yang akan menampilkan layar. Ketika nilai dari tipe ini ditambahkan ke path, sistem secara otomatis membuat View tujuan. Pendekatan ini menggantikan NavigationLink(destination:) eksplisit dan membuat navigasi menjadi sangat tipis.

NavigationView di iPad, watchOS dan tvOS

NavigationView dan NavigationStack bekerja di semua platform Apple: iOS, iPadOS, watchOS, tvOS dan macOS. Perilaku menyesuaikan dengan layar. Di iPad, NavigationStack mendukung NavigationSplitView, yang menggantikan UISplitViewController dari UIKit dan menampilkan dua kolom di layar lebar.

NavigationSplitView (iOS 16+) membagi layar menjadi sidebar (daftar) dan detail (rincian). Di iPhone, sidebar tersembunyi, hanya menampilkan detail melalui NavigationLink. Di iPad, sidebar dan detail ditampilkan secara bersamaan dalam mode split.

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

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

NavigationSplitView secara otomatis memilih mode tampilan optimal untuk setiap perangkat. Di iPhone dalam mode potret — tumpukan, di iPad dan iPhone dalam mode lanskap — split. Pengembang tidak perlu menulis kode terpisah untuk size class yang berbeda.