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 на кореново ниво.