NavigationView: khái niệm cơ bản, ngăn xếp điều hướng trong ứng dụng SwiftUI

NavigationView là gì?

NavigationView là một vùng chứa SwiftUI bao bọc một hệ thống phân cấp các màn hình và cung cấp giao diện điều hướng. Bên trong NavigationView hoạt động NavigationLink — một phần tử khi nhấn vào sẽ thay thế màn hình hiện tại bằng màn hình mới. NavigationView tự động thêm thanh điều hướng với tiêu đề và nút «Quay lại».

NavigationView xuất hiện trong iOS 13 cùng với SwiftUI. Về mặt khái niệm, nó thay thế UINavigationController từ UIKit nhưng được triển khai theo hướng khai báo. Thay vì push/pop thủ công, nhà phát triển mô tả mối quan hệ giữa các màn hình thông qua NavigationLink. Hệ thống tự động quản lý ngăn xếp.

NavigationView hỗ trợ các bổ trợ .navigationTitle, .navigationBarTitleDisplayMode, .toolbar và .searchable. Đối với iOS 16+, Apple đã giới thiệu NavigationStack, bảo tồn API của NavigationView nhưng bổ sung quản lý ngăn xếp lập trình thông qua NavigationPath. Đối với các dự án hỗ trợ iOS 15 trở xuống, NavigationView vẫn là lựa chọn duy nhất.

NavigationLink và chuyển tiếp giữa các màn hình

NavigationLink là một phần tử SwiftUI tạo chuyển tiếp đến màn hình đích bên trong NavigationView hoặc NavigationStack. Khi nhấn NavigationLink, hệ thống thêm màn hình đích vào ngăn xếp điều hướng. Hoạt ảnh chuyển tiếp là push tiêu chuẩn từ bên phải trên iOS, thích ứng với nền tảng.

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

struct DetailView: View {
    let item: Item

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

NavigationLink nhận hai tham số: destination — View đích, và label — phần tử người dùng nhấn vào. Đối với danh sách, cú pháp với value và NavigationLink(value:) rất tiện lợi — nó tự động bỏ chọn ô và hoạt động với NavigationPath.

NavigationStack vs NavigationView: so sánh API

Với iOS 16, Apple đã giới thiệu NavigationStack như một sự thay thế cho NavigationView. NavigationStack bảo tồn cú pháp khai báo nhưng bổ sung một tính năng cực kỳ quan trọng — quản lý ngăn xếp lập trình thông qua thuộc tính path kiểu NavigationPath hoặc một mảng Hashable.

Đối với các dự án có phiên bản tối thiểu iOS 16+, hãy sử dụng NavigationStack. Đối với hỗ trợ iOS 14-15 — NavigationView. NavigationStack không có tương tự trực tiếp cho các phiên bản cũ, vì vậy nâng cấp yêu cầu kiểm tra tương thích.

Toolbar và cấu hình navigationTitle

Các bổ trợ .toolbar và .navigationTitle kiểm soát nội dung của thanh điều hướng. .navigationTitle đặt tiêu đề màn hình, .navigationBarTitleDisplayMode chọn kiểu: .large (lớn, mặc định) hoặc .inline (gọn nhẹ, như trong Cài đặt). .toolbar thêm nút, tìm kiếm và điều khiển phân đoạn.

struct SettingsView: View {
    var body: some View {
        NavigationStack {
            Form {
                Section("Hồ sơ") {
                    Text("Tên người dùng")
                    Toggle("Thông báo", isOn: $notifications)
                }
            }
            .navigationTitle("Cài đặt")
            .navigationBarTitleDisplayMode(.large)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Lưu") { save() }
                }
                ToolbarItem(placement: .navigationBarLeading) {
                    EditButton()
                }
            }
        }
    }
}

.searchable là một bổ trợ khác tích hợp thanh tìm kiếm vào thanh điều hướng. Hoạt động với cả NavigationView và NavigationStack. Tìm kiếm tự động ẩn khi cuộn và hiện ra khi vuốt xuống. Hỗ trợ lọc danh sách thông qua Binding String.

Điều hướng lập trình với NavigationPath

NavigationPath là một kiểu iOS 16+ đại diện cho ngăn xếp điều hướng như một tập hợp các giá trị Hashable. Nhà phát triển thêm các phần tử vào path để chuyển tiếp lập trình và xóa chúng để quay lại. NavigationPath hỗ trợ deep link, thông báo push và khôi phục trạng thái.

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

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

        // Chuyển tiếp lập trình qua deep link
        .onOpenURL { url in
            guard let productId = DeepLinkParser.parse(url) else { return }
            path.append(Product(id: productId))
        }
    }
}

.navigationDestination(for:) đăng ký một kiểu dữ liệu để hiển thị màn hình. Khi một giá trị thuộc kiểu này được thêm vào path, hệ thống tự động tạo View đích. Cách tiếp cận này thay thế NavigationLink(destination:) rõ ràng và làm cho điều hướng được nhập kiểu chặt chẽ.

NavigationView trên iPad, watchOS và tvOS

NavigationView và NavigationStack hoạt động trên tất cả các nền tảng Apple: iOS, iPadOS, watchOS, tvOS và macOS. Hành vi thích ứng với màn hình. Trên iPad, NavigationStack hỗ trợ NavigationSplitView, thay thế UISplitViewController từ UIKit và hiển thị hai cột trên màn hình rộng.

NavigationSplitView (iOS 16+) chia màn hình thành thanh bên (danh sách) và chi tiết. Trên iPhone, thanh bên bị ẩn, chỉ hiển thị chi tiết qua NavigationLink. Trên iPad, thanh bên và chi tiết được hiển thị đồng thời ở chế độ split.

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

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

NavigationSplitView tự động chọn chế độ hiển thị tối ưu cho mỗi thiết bị. Trên iPhone ở chế độ dọc — ngăn xếp, trên iPad và iPhone ở chế độ ngang — split. Nhà phát triển không cần viết mã riêng cho các lớp kích thước khác nhau.