Skip to Content
iOS🧭 NavigationNavigationStack

NavigationStack trong SwiftUI

1. Cơ bản

struct ContentView: View { var body: some View { NavigationStack { List { NavigationLink("Settings") { SettingsView() } NavigationLink("Profile") { ProfileView() } } .navigationTitle("Home") } } }

Static Destination

NavigationLink("Go to Detail") { DetailView() } NavigationLink { DetailView() } label: { HStack { Image(systemName: "star") Text("Favorites") } }

Value-based (iOS 16+)

struct ProductRow: View { let product: Product var body: some View { NavigationLink(value: product) { Text(product.name) } } } struct ContentView: View { let products: [Product] var body: some View { NavigationStack { List(products) { product in ProductRow(product: product) } .navigationDestination(for: Product.self) { product in ProductDetailView(product: product) } } } }

3. Navigation Title & Toolbar

NavigationStack { List { } .navigationTitle("Products") .navigationBarTitleDisplayMode(.large) // .inline, .automatic .toolbar { ToolbarItem(placement: .topBarTrailing) { Button("Add") { } } ToolbarItem(placement: .topBarLeading) { Button("Edit") { } } } }

4. Programmatic Navigation

struct ContentView: View { @State private var path = NavigationPath() var body: some View { NavigationStack(path: $path) { VStack { Button("Go to Settings") { path.append("settings") } Button("Go to Profile") { path.append(User(name: "John")) } } .navigationDestination(for: String.self) { value in if value == "settings" { SettingsView() } } .navigationDestination(for: User.self) { user in ProfileView(user: user) } } } func navigateToRoot() { path.removeLast(path.count) // Pop to root } }

5. Deep Linking

struct AppNavigator: View { @State private var path: [Route] = [] enum Route: Hashable { case productList case productDetail(id: Int) case cart case checkout } var body: some View { NavigationStack(path: $path) { HomeView() .navigationDestination(for: Route.self) { route in switch route { case .productList: ProductListView() case .productDetail(let id): ProductDetailView(id: id) case .cart: CartView() case .checkout: CheckoutView() } } } .onOpenURL { url in // Handle deep link if url.path.contains("product") { if let id = Int(url.lastPathComponent) { path = [.productDetail(id: id)] } } } } }

6. Custom Back Button

struct DetailView: View { @Environment(\.dismiss) var dismiss var body: some View { VStack { Text("Detail") } .navigationBarBackButtonHidden() .toolbar { ToolbarItem(placement: .topBarLeading) { Button { dismiss() } label: { HStack { Image(systemName: "chevron.left") Text("Back") } } } } } }
struct SearchableList: View { @State private var searchText = "" let items = ["Apple", "Banana", "Cherry", "Date"] var filteredItems: [String] { if searchText.isEmpty { return items } return items.filter { $0.localizedCaseInsensitiveContains(searchText) } } var body: some View { NavigationStack { List(filteredItems, id: \.self) { item in NavigationLink(item) { Text(item) } } .navigationTitle("Fruits") .searchable(text: $searchText, prompt: "Search fruits") } } }

📝 Tóm tắt

ComponentMục đích
NavigationStackContainer cho navigation
NavigationLinkTạo link điều hướng
.navigationDestinationDefine destinations
NavigationPathProgrammatic navigation
Last updated on