NavigationLink — co to je, tlačítko přechodu ve SwiftUI

Co je NavigationLink ve SwiftUI?

NavigationLink je View, které po stisknutí iniciuje navigační přechod. Uvnitř NavigationStack stisknutí NavigationLink umístí cílovou obrazovku do zásobníku a zobrazí systémové tlačítko „Zpět”. NavigationLink existuje od iOS 13 a je hlavním způsobem uživatelské navigace ve SwiftUI.

NavigationLink nedědí z UIButton — je to SwiftUI View, které se automaticky přizpůsobuje kontextu. Uvnitř List se NavigationLink zobrazuje s indikátorem odhalení (disclosure indicator). Mimo seznam se NavigationLink chová jako běžné tlačítko, ale s navigačním chováním.

Podle SwiftUI Lab (2024) je NavigationLink jedním z nejpoužívanějších View ve SwiftUI aplikacích, hned za Text, Image a VStack. Pochopení rozdílů mezi formami inicializace je kritické pro výkon a předvídatelné chování navigace.

Jak NavigationLink funguje pod kapotou

Po stisknutí NavigationLink přidá hodnotu (nebo destination) do navigačního zásobníku spojeného s nejbližším NavigationStack nebo NavigationView. SwiftUI používá EnvironmentValue k předávání cesty navigace přes hierarchii View. NavigationLink tuto cestu čte z Environment a po stisknutí ji upravuje.

Formy inicializace NavigationLink

NavigationLink má dvě hlavní formy: s destination (přímé uvedení cílového View) a s value (hodnota pro NavigationDestination). Volba formy závisí na verzi iOS a architektuře navigace.

Destination forma (iOS 13+): NavigationLink(destination: DetailView(), label: { Text(„Open”) }). Tato forma vytváří DetailView okamžitě při renderování NavigationLink, i když uživatel neklikl na odkaz. To vede k předčasné inicializaci View a potenciálním problémům s výkonem, pokud cílové View provádí těžké operace v inicializátoru.

Value forma (iOS 16+): NavigationLink(value: „detail_42”, label: { Text(„Open”) }). Cílové View je vytvořeno pouze při kliknutí na odkaz, když SwiftUI najde odpovídající .navigationDestination. To zabraňuje předčasné inicializaci a činí navigaci předvídatelnější.

NavigationLink s NavigationStack: správné použití

NavigationLink s NavigationStack v iOS 16+ vyžaduje přechod na value formu. Definujete typ dat pro navigaci (String, Int, enum Route) a registrujete destination přes .navigationDestination. NavigationLink umístí do zásobníku pouze hodnotu a SwiftUI vytvoří cílové View při kliknutí.

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

// Programová navigace:
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("Otevřít Nastavení") {
                        path.append(AppRoute.settings)
                    }
                }
        }
    }
}

Programová navigace: přidání hodnoty do path (přes path.append) je ekvivalentní stisknutí NavigationLink se stejnou hodnotou. To umožňuje implementaci navigace z ViewModel, Coordinator nebo jako reakci na push oznámení.

IsActive forma (NavigationLink(isActive:destination:label:)) je dostupná pro kompatibilitu, ale není doporučena v iOS 16+. Použijte value formu s Binding na pole cesty nebo NavigationPath.

NavigationLink v List: vlastnosti

NavigationLink v List automaticky zobrazuje šipku odhalení (chevron) v pravé části řádku, signalizující uživateli, že stisknutí povede na jinou obrazovku. List spravuje zobrazení šipky automaticky — na rozdíl od běžného NavigationLink mimo seznam, kde šipka není.

Od iOS 16 List s NavigationLink automaticky používá value formu uvnitř List(data:rowContent:). Při použití ForEach uvnitř List se šipka odhalení také přidává automaticky. Toto chování nelze vypnout modifikátory — pouze nahrazení NavigationLink za Button může šipku odstranit.

Problém s destination formou v List: pokud používáte NavigationLink(destination:label:) uvnitř List, všechna cílová View jsou vytvořena okamžitě při načtení seznamu, bez ohledu na to, zda uživatel klikl na odkaz či nikoli. Pro seznamy s velkým počtem řádků to může výrazně zpomalit počáteční načítání a zvýšit spotřebu paměti. Value forma s NavigationStack tento problém řeší.

Podle WWDC 2022 (Session 10054) Apple doporučuje používat NavigationStack a value formu NavigationLink pro nové projekty. To je zvláště důležité pro List s dynamickými daty, kde počet řádků může být velký.

Vzory použití NavigationLink

Vzor 1: vlastní vzhled NavigationLink. NavigationLink přijímá libovolné View jako label, což umožňuje vytvořit libovolný design pro odkaz. Uvnitř List je to obzvláště pohodlné — při použití NavigationLink automaticky získáte šipku odhalení.

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

Vzor 2: NavigationLink bez šipky (vlastní tlačítko). Pokud nepotřebujete šipku odhalení, použijte Button pro programovou navigaci: path.append(value). To je užitečné pro vlastní prvky rozhraní, kde NavigationLink vypadá nepřirozeně.

Vzor 3: podmíněná navigace. Můžete zablokovat NavigationLink pomocí prázdného destination nebo nepřidáním .navigationDestination pro určité hodnoty. Programová navigace přes path umožňuje kontrolovat podmínky před přidáním hodnoty.

Podle Hacking with Swift (2024) většina problémů s NavigationLink souvisí s použitím destination formy ve starších projektech. Při migraci na NavigationStack nahraďte všechny NavigationLink(destination:label:) za NavigationLink(value:label:) a přidejte .navigationDestination na kořenové úrovni.