NavigationLink — apa itu, tombol transisi di SwiftUI

Apa itu NavigationLink di SwiftUI?

NavigationLink adalah View yang saat ditekan memulai transisi navigasi. Di dalam NavigationStack, menekan NavigationLink menempatkan layar tujuan ke tumpukan dan menampilkan tombol sistem “Kembali”. NavigationLink sudah ada sejak iOS 13 dan merupakan cara utama navigasi pengguna di SwiftUI.

NavigationLink tidak mewarisi dari UIButton — ini adalah View SwiftUI yang secara otomatis menyesuaikan diri dengan konteks. Di dalam List, NavigationLink ditampilkan dengan indikator pengungkapan (disclosure indicator). Di luar daftar, NavigationLink berperilaku seperti tombol biasa, tetapi dengan perilaku navigasi.

Menurut SwiftUI Lab (2024), NavigationLink adalah salah satu View yang paling sering digunakan di aplikasi SwiftUI, hanya kalah dari Text, Image, dan VStack. Memahami perbedaan antara bentuk inisialisasi sangat penting untuk kinerja dan perilaku navigasi yang dapat diprediksi.

Bagaimana NavigationLink bekerja di balik layar

Saat ditekan, NavigationLink menambahkan nilai (atau destination) ke tumpukan navigasi yang terhubung dengan NavigationStack atau NavigationView terdekat. SwiftUI menggunakan EnvironmentValue untuk mengirimkan jalur navigasi melalui hierarki View. NavigationLink membaca jalur ini dari Environment dan memodifikasinya saat ditekan.

Bentuk inisialisasi NavigationLink

NavigationLink memiliki dua bentuk utama: dengan destination (penunjukan langsung View tujuan) dan dengan value (nilai untuk NavigationDestination). Pemilihan bentuk tergantung pada versi iOS dan arsitektur navigasi.

Bentuk Destination (iOS 13+): NavigationLink(destination: DetailView(), label: { Text(“Open”) }). Bentuk ini membuat DetailView segera saat NavigationLink di-render, bahkan jika pengguna belum menekan tautan. Ini menyebabkan inisialisasi dini View dan potensi masalah kinerja jika View tujuan melakukan operasi berat di inisialisator.

Bentuk Value (iOS 16+): NavigationLink(value: “detail_42”, label: { Text(“Open”) }). View tujuan dibuat hanya saat tautan ditekan, ketika SwiftUI menemukan .navigationDestination yang sesuai. Ini mencegah inisialisasi dini dan membuat navigasi lebih dapat diprediksi.

NavigationLink dengan NavigationStack: penggunaan yang benar

NavigationLink dengan NavigationStack di iOS 16+ memerlukan peralihan ke bentuk value. Anda menentukan tipe data untuk navigasi (String, Int, enum Route) dan mendaftarkan destination melalui .navigationDestination. NavigationLink menempatkan hanya nilai ke dalam tumpukan, dan SwiftUI membuat View tujuan saat ditekan.

struct CatalogView: View {
    let categories: [String]

    var body: some View {
        List(categories, id: \.self) { category in
            NavigationLink(value: category) {
                Text(category)
            }
        }
        .navigationDestination(for: String.self) { category in
            CategoryView(name: category)
        }
    }
}

// Navigasi terprogram:
struct DeepLinkView: View {
    @State private var path: [AppRoute] = []

    var body: some View {
        NavigationStack(path: $path) {
            HomeView()
                .navigationDestination(for: AppRoute.self) { route in
                    switch route {
                    case .detail(let id): DetailView(id: id)
                    case .settings: SettingsView()
                    }
                }
                .toolbar {
                    Button("Buka Pengaturan") {
                        path.append(AppRoute.settings)
                    }
                }
        }
    }
}

Navigasi terprogram: menambahkan nilai ke path (melalui path.append) setara dengan menekan NavigationLink dengan nilai yang sama. Ini memungkinkan implementasi navigasi dari ViewModel, Coordinator, atau sebagai respons terhadap notifikasi push.

Bentuk IsActive (NavigationLink(isActive:destination:label:)) tersedia untuk kompatibilitas, tetapi tidak direkomendasikan di iOS 16+. Gunakan bentuk value dengan Binding ke array jalur atau NavigationPath.

NavigationLink di List: karakteristik

NavigationLink di List secara otomatis menampilkan panah pengungkapan (chevron) di sisi kanan baris, menandakan kepada pengguna bahwa menekan akan mengarah ke layar lain. List mengelola tampilan panah secara otomatis — tidak seperti NavigationLink biasa di luar daftar, di mana tidak ada panah.

Sejak iOS 16, List dengan NavigationLink secara otomatis menggunakan bentuk value di dalam List(data:rowContent:). Saat menggunakan ForEach di dalam List, panah pengungkapan juga ditambahkan secara otomatis. Perilaku ini tidak dapat dinonaktifkan melalui pengubah — hanya mengganti NavigationLink dengan Button yang dapat menghilangkan panah.

Masalah dengan bentuk destination di List: jika Anda menggunakan NavigationLink(destination:label:) di dalam List, semua View tujuan dibuat segera saat daftar dimuat, terlepas dari apakah pengguna menekan tautan atau tidak. Untuk daftar dengan jumlah baris yang banyak, ini dapat memperlambat pemuatan awal secara signifikan dan meningkatkan konsumsi memori. Bentuk value dengan NavigationStack menyelesaikan masalah ini.

Menurut WWDC 2022 (Session 10054), Apple merekomendasikan penggunaan NavigationStack dan bentuk value NavigationLink untuk proyek baru. Ini sangat penting untuk List dengan data dinamis, di mana jumlah baris bisa banyak.

Pola penggunaan NavigationLink

Pola 1: tampilan kustom NavigationLink. NavigationLink menerima View apa pun sebagai label, memungkinkan pembuatan desain khusus untuk tautan. Di dalam List, ini sangat nyaman — Anda mendapatkan panah pengungkapan secara otomatis saat menggunakan NavigationLink.

NavigationLink(value: ProductRoute.detail(product)) {
    HStack {
        AsyncImage(url: product.imageURL)
            .frame(width: 60, height: 60)
        VStack(alignment: .leading) {
            Text(product.name).font(.headline)
            Text(product.price) .foregroundColor(.secondary)
        }
    }
    .padding(8)
}

Pola 2: NavigationLink tanpa panah (tombol kustom). Jika Anda tidak memerlukan panah pengungkapan, gunakan Button untuk navigasi terprogram: path.append(value). Ini berguna untuk elemen antarmuka kustom di mana NavigationLink terlihat tidak alami.

Pola 3: navigasi bersyarat. Anda dapat memblokir NavigationLink dengan menggunakan destination kosong atau tidak menambahkan .navigationDestination untuk nilai tertentu. Navigasi terprogram melalui path memungkinkan pemeriksaan kondisi sebelum menambahkan nilai.

Menurut Hacking with Swift (2024), sebagian besar masalah dengan NavigationLink terkait dengan penggunaan bentuk destination di proyek lama. Saat migrasi ke NavigationStack, ganti semua NavigationLink(destination:label:) dengan NavigationLink(value:label:) dan tambahkan .navigationDestination di tingkat akar.