NavigationView: mga batayan, stack ng nabigasyon sa mga aplikasyon ng SwiftUI

Ano ang NavigationView?

NavigationView — isang container ng SwiftUI na bumabalot sa hierarchy ng mga screen at nagbibigay ng navigation interface. Sa loob ng NavigationView gumagana ang NavigationLink — isang elemento na kapag pinindot ay pinapalitan ang kasalukuyang screen ng bago. Awtomatikong nagdaragdag ang NavigationView ng navigation bar na may pamagat at «Bumalik» na buton.

Lumitaw ang NavigationView sa iOS 13 kasama ng SwiftUI. Sa konsepto, pinapalitan nito ang UINavigationController mula sa UIKit, ngunit ipinatupad nang deklaratibo. Sa halip na manu-manong push/pop, inilalarawan ng developer ang koneksyon sa pagitan ng mga screen sa pamamagitan ng NavigationLink. Awtomatikong pinamamahalaan ng system ang stack.

NavigationView sumusuporta sa mga modifier na .navigationTitle, .navigationBarTitleDisplayMode, .toolbar at .searchable. Para sa iOS 16+, ipinakilala ng Apple ang NavigationStack, na nagpapanatili ng API ng NavigationView ngunit nagdaragdag ng programatikong pamamahala ng stack sa pamamagitan ng NavigationPath. Para sa mga proyektong sumusuporta sa iOS 15 at mas luma, nananatiling tanging pagpipilian ang NavigationView.

NavigationLink at mga paglipat sa pagitan ng mga screen

NavigationLink — isang elemento ng SwiftUI na gumagawa ng paglipat sa target na screen sa loob ng NavigationView o NavigationStack. Kapag pinindot ang NavigationLink, idinaragdag ng system ang target na screen sa navigation stack. Ang animation ng paglipat — standard push mula sa kanan para sa iOS, umaangkop sa platform.

struct ContentView: View {
    var body: some View {
        NavigationView {
            List(items) { item in
                NavigationLink(destination: DetailView(item: item)) {
                    Text(item.title)
                }
            }
            .navigationTitle("Listahan")
        }
    }
}

struct DetailView: View {
    let item: Item

    var body: some View {
        VStack {
            Text(item.description)
                .navigationTitle(item.title)
                .navigationBarTitleDisplayMode(.inline)
        }
    }
}

Ang NavigationLink ay tumatanggap ng dalawang parameter: destination — target na View, at label — elemento na pinindot ng gumagamit. Para sa mga listahan, maginhawa ang syntax na may value at NavigationLink(value:), na awtomatikong nagde-deselect ng cell at gumagana sa NavigationPath.

NavigationStack vs NavigationView: paghahambing ng API

Mula noong iOS 16, ipinakilala ng Apple ang NavigationStack bilang kapalit ng NavigationView. Pinapanatili ng NavigationStack ang deklaratibong syntax, ngunit nagdaragdag ng kritikal na kakayahan — programatikong pamamahala ng stack sa pamamagitan ng property na path ng uri na NavigationPath o array ng Hashable.

Para sa mga proyektong may minimum na bersyon na iOS 16+ gamitin ang NavigationStack. Para sa suporta ng iOS 14-15 — NavigationView. Ang NavigationStack ay walang direktang analog para sa mga lumang bersyon, kaya ang upgrade ay nangangailangan ng pagsusuri sa compatibility.

Toolbar at pag-configure ng navigationTitle

Ang mga modifier na .toolbar at .navigationTitle ay namamahala sa nilalaman ng navigation bar. Ang .navigationTitle ay nagtatakda ng pamagat ng screen, ang .navigationBarTitleDisplayMode ay pumipili ng estilo: .large (malaki, default) o .inline (compact, tulad ng sa Mga Setting). Ang .toolbar ay nagdaragdag ng mga buton, paghahanap, at segmented na kontrol.

struct SettingsView: View {
    var body: some View {
        NavigationStack {
            Form {
                Section("Profile") {
                    Text("Username")
                    Toggle("Mga Notification", isOn: $notifications)
                }
            }
            .navigationTitle("Mga Setting")
            .navigationBarTitleDisplayMode(.large)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("I-save") { save() }
                }
                ToolbarItem(placement: .navigationBarLeading) {
                    EditButton()
                }
            }
        }
    }
}

.searchable — isa pang modifier na nagsasama ng search bar sa navigation bar. Gumagana pareho sa NavigationView at NavigationStack. Awtomatikong nagtatago ang paghahanap kapag nag-s-scroll at lumilitaw kapag nag-swipe pababa. Sumusuporta sa pag-filter ng listahan sa pamamagitan ng Binding String.

Programatikong nabigasyon gamit ang NavigationPath

NavigationPath — isang uri ng iOS 16+ na kumakatawan sa navigation stack bilang isang koleksyon ng mga halagang Hashable. Nagdaragdag ang developer ng mga elemento sa path para sa programatikong paglipat, tinatanggal ang mga ito para sa pagbabalik. Sinusuportahan ng NavigationPath ang mga deep link, push notification, at pagpapanumbalik ng estado.

struct AppNavigation: View {
    @State private var path = NavigationPath()

    var body: some View {
        NavigationStack(path: $path) {
            List(categories) { category in
                NavigationLink("Kategorya \(category.name)",
                               value: category)
            }
            .navigationTitle("Mga Kategorya")
            .navigationDestination(for: Category.self) { category in
                ProductListView(category: category)
            }
            .navigationDestination(for: Product.self) { product in
                ProductDetailView(product: product)
            }
        }

        // Programatikong paglipat sa pamamagitan ng deep link
        .onOpenURL { url in
            guard let productId = DeepLinkParser.parse(url) else { return }
            path.append(Product(id: productId))
        }
    }
}

.navigationDestination(for:) nagrerehistro ng uri ng data kung saan dapat ipakita ang isang screen. Kapag ang isang halaga ng uri na ito ay idinagdag sa path, awtomatikong gumagawa ang system ng target na View. Ang pamamaraang ito ay pumapalit sa tahasang NavigationLink(destination:) at ginagawang striktong tipisado ang nabigasyon.

NavigationView sa iPad, watchOS at tvOS

NavigationView at NavigationStack ay gumagana sa lahat ng platform ng Apple: iOS, iPadOS, watchOS, tvOS at macOS. Ang pag-uugali ay umaangkop sa screen. Sa iPad, sinusuportahan ng NavigationStack ang NavigationSplitView, na pumapalit sa UISplitViewController mula sa UIKit at nagpapakita ng dalawang column sa malawak na screen.

Ang NavigationSplitView (iOS 16+) ay naghahati sa screen sa sidebar (listahan) at detail (mga detalye). Sa iPhone, ang sidebar ay nakatago, na nagpapakita lamang ng detail sa pamamagitan ng NavigationLink. Sa iPad, ang sidebar at detail ay ipinapakita nang sabay-sabay sa split mode.

struct AdaptiveNavigation: View {
    @State private var selectedCategory: Category?

    var body: some View {
        NavigationSplitView {
            List(categories, selection: $selectedCategory) { category in
                Text(category.name)
            }
            .navigationTitle("Mga Kategorya")
        } detail: {
            ProductListView(category: selectedCategory)
        }
    }
}

Awtomatikong pumipili ang NavigationSplitView ng pinakamainam na mode ng pagpapakita para sa bawat device. Sa iPhone sa portrait mode — stack, sa iPad at iPhone sa landscape mode — split. Ang developer ay hindi kailangang magsulat ng hiwalay na code para sa iba't ibang size class.