NavigationLink — mi ez, átmeneti gomb SwiftUI-ban

Mi az a NavigationLink SwiftUI-ban?

NavigationLink egy View, amely megnyomásakor navigációs átmenetet indít el. NavigationStack-en belül a NavigationLink megnyomása elhelyezi a cél képernyőt a veremben és megjeleníti a rendszer „Vissza” gombját. A NavigationLink iOS 13 óta létezik, és ez az alapvető felhasználói navigációs mód SwiftUI-ban.

A NavigationLink nem örököl az UIButton-ból — ez egy SwiftUI View, amely automatikusan alkalmazkodik a kontextushoz. List-en belül a NavigationLink megjelenítési nyíllal (disclosure indicator) jelenik meg. A listán kívül a NavigationLink egy szokásos gombként viselkedik, de navigációs viselkedéssel.

A SwiftUI Lab (2024) szerint a NavigationLink az egyik leggyakrabban használt View a SwiftUI alkalmazásokban, csak a Text, Image és VStack előzi meg. Az inicializációs formák közötti különbségek megértése kritikus a teljesítmény és a kiszámítható navigációs viselkedés szempontjából.

Hogyan működik a NavigationLink a motorháztető alatt

Megnyomáskor a NavigationLink hozzáad egy értéket (vagy destination-t) a legközelebbi NavigationStack vagy NavigationView navigációs vereméhez. A SwiftUI az EnvironmentValue-t használja a navigációs útvonal továbbítására a View hierarchián keresztül. A NavigationLink ezt az útvonalat olvassa ki az Environment-ből, és megnyomáskor módosítja azt.

NavigationLink inicializációs formái

NavigationLink két fő formával rendelkezik: destination (cél View közvetlen megadása) és value (érték a NavigationDestination számára). A forma kiválasztása az iOS verziójától és a navigációs architektúrától függ.

Destination forma (iOS 13+): NavigationLink(destination: DetailView(), label: { Text(„Open”) }). Ez a forma azonnal létrehozza a DetailView-t a NavigationLink renderelésekor, még akkor is, ha a felhasználó nem kattintott a linkre. Ez a View idő előtti inicializálásához és potenciális teljesítményproblémákhoz vezet, ha a cél View nehéz műveleteket végez az inicializátorban.

Value forma (iOS 16+): NavigationLink(value: „detail_42”, label: { Text(„Open”) }). A cél View csak a linkre kattintáskor jön létre, amikor a SwiftUI megtalálja a megfelelő .navigationDestination-t. Ez megakadályozza az idő előtti inicializálást és kiszámíthatóbbá teszi a navigációt.

NavigationLink NavigationStackkel: helyes használat

NavigationLink NavigationStackkel iOS 16+ esetén a value formára való átállást igényel. Meghatározza a navigáció adattípusát (String, Int, enum Route), és regisztrálja a destination-t .navigationDestination segítségével. A NavigationLink csak az értéket helyezi a verembe, a SwiftUI pedig megnyomáskor hozza létre a cél View-t.

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

// Programozott navigáció:
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("Beállítások megnyitása") {
                        path.append(AppRoute.settings)
                    }
                }
        }
    }
}

Programozott navigáció: az érték hozzáadása a path-hoz (path.append segítségével) egyenértékű a NavigationLink megnyomásával ugyanazzal az értékkel. Ez lehetővé teszi a navigáció megvalósítását ViewModel-ből, Coordinator-ból vagy push értesítésekre válaszul.

IsActive forma (NavigationLink(isActive:destination:label:)) kompatibilitás céljából elérhető, de iOS 16+ esetén nem ajánlott. Használja a value formát Binding segítségével útvonal tömbhöz vagy NavigationPath-hez.

NavigationLink List-ben: jellemzők

NavigationLink List-ben automatikusan megjelenít egy felfedő nyilat (chevron) a sor jobb oldalán, jelezve a felhasználónak, hogy a kattintás egy másik képernyőre vezet. A List automatikusan kezeli a nyíl megjelenítését — ellentétben a szokásos NavigationLink-kel a listán kívül, ahol nincs nyíl.

iOS 16-tól kezdve a List NavigationLink-kel automatikusan a value formát használja a List(data:rowContent:) belsejében. A ForEach használatakor a List belsejében a felfedő nyíl szintén automatikusan hozzáadódik. Ez a viselkedés nem kapcsolható ki módosítókkal — csak a NavigationLink Button-re cserélése távolíthatja el a nyilat.

Probléma a destination formával List-ben: ha NavigationLink(destination:label:) használ a List belsejében, az összes cél View azonnal létrejön a lista betöltésekor, függetlenül attól, hogy a felhasználó rákattintott-e a linkre vagy sem. Sok sorral rendelkező listák esetén ez jelentősen lelassíthatja a kezdeti betöltést és növelheti a memóriahasználatot. A value forma NavigationStackkel megoldja ezt a problémát.

A WWDC 2022 (Session 10054) szerint az Apple a NavigationStack és a NavigationLink value formájának használatát ajánlja új projektekhez. Ez különösen fontos a dinamikus adatokkal rendelkező List esetében, ahol a sorok száma nagy lehet.

NavigationLink használati minták

Minta 1: egyedi megjelenésű NavigationLink. A NavigationLink bármilyen View-t elfogad label-ként, lehetővé téve tetszőleges dizájn létrehozását a linkhez. List-en belül ez különösen kényelmes — automatikusan megkapja a felfedő nyilat a NavigationLink használatakor.

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

Minta 2: NavigationLink nyíl nélkül (egyedi gomb). Ha nincs szüksége a felfedő nyílra, használja a Button-t programozott navigációhoz: path.append(value). Ez hasznos egyedi interfész elemekhez, ahol a NavigationLink természetellenesen néz ki.

Minta 3: feltételes navigáció. Letilthatja a NavigationLink-t üres destination használatával vagy bizonyos értékekhez .navigationDestination hozzáadásának elmulasztásával. A path-on keresztüli programozott navigáció lehetővé teszi a feltételek ellenőrzését az érték hozzáadása előtt.

A Hacking with Swift (2024) szerint a NavigationLink-kel kapcsolatos problémák többsége a destination forma használatához kapcsolódik régebbi projektekben. NavigationStack-re való migrációkor cserélje ki az összes NavigationLink(destination:label:)-t NavigationLink(value:label:)-re, és adja hozzá a .navigationDestination-t a gyökér szinten.