NavigationLink — шта је то, дугме прелаза у SwiftUI

Шта је NavigationLink у SwiftUI?

NavigationLink је View које притиском покреће навигациони прелаз. Унутар NavigationStack, притисак на NavigationLink смешта циљни екран на стек и приказује системско дугме „Назад”. NavigationLink постоји од iOS 13 и представља основни начин корисничке навигације у SwiftUI.

NavigationLink не наслеђује од UIButton — то је SwiftUI View које се аутоматски прилагођава контексту. Унутар List, NavigationLink се приказује са стрелицом откривања (disclosure indicator). Ван листе, NavigationLink се понаша као обично дугме, али са навигационим понашањем.

Према SwiftUI Lab (2024), NavigationLink је један од најчешће коришћених View у SwiftUI апликацијама, одмах иза Text, Image и VStack. Разумевање разлика између форми иницијализације је критично за перформансе и предвидљиво понашање навигације.

Како NavigationLink ради испод хаубе

Притиском, NavigationLink додаје вредност (или destination) у навигациони стек повезан са најближим NavigationStack или NavigationView. SwiftUI користи EnvironmentValue за пренос путање навигације кроз хијерархију View. NavigationLink чита ову путању из Environment и притиском је мења.

Форме иницијализације NavigationLink

NavigationLink има две основне форме: са destination (директно навођење циљног View) и са value (вредност за NavigationDestination). Избор форме зависи од верзије iOS и архитектуре навигације.

Destination форма (iOS 13+): NavigationLink(destination: DetailView(), label: { Text(„Open”) }). Ова форма ствара DetailView одмах при рендеровању NavigationLink, чак и ако корисник није кликнуо на линк. Ово доводи до превремене иницијализације View и потенцијалних проблема са перформансама, ако циљни View изводи тешке операције у иницијализатору.

Value форма (iOS 16+): NavigationLink(value: „detail_42”, label: { Text(„Open”) }). Циљни View се ствара тек при клику на линк, када SwiftUI пронађе одговарајући .navigationDestination. Ово спречава превремену иницијализацију и чини навигацију предвидљивијом.

NavigationLink са NavigationStack: правилна употреба

NavigationLink са NavigationStack у iOS 16+ захтева прелазак на value форму. Дефинишете тип података за навигацију (String, Int, enum Route) и региструјете destination преко .navigationDestination. NavigationLink смешта у стек само вредност, а SwiftUI ствара циљни View при клику.

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

// Програмска навигација:
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("Отвори подешавања") {
                        path.append(AppRoute.settings)
                    }
                }
        }
    }
}

Програмска навигација: додавање вредности у path (преко path.append) је еквивалентно притиску на NavigationLink са истом вредношћу. Ово омогућава имплементацију навигације из ViewModel, Coordinator или као одговор на push обавештења.

IsActive форма (NavigationLink(isActive:destination:label:)) доступна је за компатибилност, али се не препоручује у iOS 16+. Користите value форму са Binding на низ путање или NavigationPath.

NavigationLink у List: карактеристике

NavigationLink у List аутоматски приказује стрелицу откривања (chevron) у десном делу реда, сигнализирајући кориснику да притисак води до другог екрана. List управља приказивањем стрелице аутоматски — за разлику од обичног NavigationLink ван листе, где стрелице нема.

Од iOS 16, List са NavigationLink аутоматски користи value форму унутар List(data:rowContent:). При коришћењу ForEach унутар List, стрелица откривања се такође додаје аутоматски. Ово понашање се не може искључити модификаторима — само замена NavigationLink са Button може уклонити стрелицу.

Проблем са destination формом у List: ако користите NavigationLink(destination:label:) унутар List, сви циљни View се стварају одмах при учитавању листе, без обзира да ли је корисник кликнуо на линк или не. За листе са великим бројем редова, ово може значајно успорити почетно учитавање и повећати потрошњу меморије. Value форма са NavigationStack решава овај проблем.

Према WWDC 2022 (Session 10054), Apple препоручује коришћење NavigationStack и value форме NavigationLink за нове пројекте. Ово је посебно важно за List са динамичким подацима, где број редова може бити велики.

Обрасци коришћења NavigationLink

Образац 1: прилагођени изглед NavigationLink. NavigationLink прихвата било које View као label, омогућавајући стварање произвољног дизајна за линк. Унутар List, ово је посебно згодно — добијате стрелицу откривања аутоматски при коришћењу 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)
}

Образац 2: NavigationLink без стрелице (прилагођено дугме). Ако вам не треба стрелица откривања, користите Button за програмску навигацију: path.append(value). Ово је корисно за прилагођене елементе интерфејса где NavigationLink изгледа неприродно.

Образац 3: условна навигација. Можете блокирати NavigationLink коришћењем празног destination или не додавањем .navigationDestination за одређене вредности. Програмска навигација кроз path омогућава проверу услова пре додавања вредности.

Према Hacking with Swift (2024), већина проблема са NavigationLink повезана је са коришћењем destination форме у старим пројектима. При миграцији на NavigationStack, замените све NavigationLink(destination:label:) са NavigationLink(value:label:) и додајте .navigationDestination на коренском нивоу.