NavigationLink — nó là gì, nút chuyển đổi trong SwiftUI

NavigationLink trong SwiftUI là gì?

NavigationLink là một View bắt đầu chuyển đổi điều hướng khi được nhấn. Bên trong NavigationStack, nhấn NavigationLink sẽ đặt màn hình mục tiêu lên ngăn xếp và hiển thị nút Quay lại của hệ thống. NavigationLink đã tồn tại từ iOS 13 và là phương pháp điều hướng chính của người dùng trong SwiftUI.

NavigationLink không kế thừa từ UIButton — nó là một View SwiftUI tự động thích ứng với ngữ cảnh. Bên trong List, NavigationLink hiển thị với một chỉ báo tiết lộ. Bên ngoài danh sách, NavigationLink hoạt động như một nút thông thường nhưng có hành vi điều hướng.

Theo SwiftUI Lab (2024), NavigationLink là một trong những View được sử dụng nhiều nhất trong các ứng dụng SwiftUI, chỉ sau Text, Image và VStack. Hiểu sự khác biệt giữa các dạng khởi tạo là rất quan trọng đối với hiệu suất và hành vi điều hướng có thể dự đoán được.

NavigationLink hoạt động bên trong như thế nào

Khi được nhấn, NavigationLink thêm một giá trị (hoặc destination) vào ngăn xếp điều hướng liên kết với NavigationStack hoặc NavigationView gần nhất. SwiftUI sử dụng EnvironmentValue để truyền đường dẫn điều hướng qua hệ thống phân cấp View. NavigationLink đọc đường dẫn này từ Environment và sửa đổi nó khi được nhấn.

Các dạng khởi tạo NavigationLink

NavigationLink có hai dạng chính: với destination (chỉ định trực tiếp View mục tiêu) và với value (giá trị cho NavigationDestination). Việc chọn dạng phụ thuộc vào phiên bản iOS và kiến trúc điều hướng.

Dạng destination (iOS 13+): NavigationLink(destination: DetailView(), label: { Text("Open") }). Dạng này tạo DetailView ngay lập tức khi hiển thị NavigationLink, ngay cả khi người dùng chưa nhấp vào liên kết. Điều này dẫn đến khởi tạo View sớm và các vấn đề hiệu suất tiềm ẩn nếu View mục tiêu thực hiện các thao tác nặng trong bộ khởi tạo của nó.

Dạng value (iOS 16+): NavigationLink(value: "detail_42", label: { Text("Open") }). View mục tiêu chỉ được tạo khi liên kết được nhấn, khi SwiftUI tìm thấy .navigationDestination tương ứng. Điều này ngăn chặn khởi tạo sớm và làm cho điều hướng dễ dự đoán hơn.

NavigationLink với NavigationStack: cách sử dụng đúng

NavigationLink với NavigationStack trong iOS 16+ yêu cầu chuyển sang dạng value. Bạn xác định một kiểu dữ liệu cho điều hướng (String, Int, enum Route) và đăng ký đích đến thông qua .navigationDestination. NavigationLink chỉ đặt giá trị lên ngăn xếp và SwiftUI tạo View mục tiêu khi nhấn.

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

// Programmatic navigation:
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("Open Settings") {
                        path.append(AppRoute.settings)
                    }
                }
        }
    }
}

Điều hướng lập trình: thêm một giá trị vào đường dẫn (thông qua path.append) tương đương với việc nhấn một NavigationLink có cùng giá trị. Điều này cho phép triển khai điều hướng từ ViewModel, Coordinator hoặc để phản hồi thông báo push.

Dạng IsActive (NavigationLink(isActive:destination:label:)) có sẵn để tương thích nhưng không được khuyến nghị trong iOS 16+. Sử dụng dạng value với Binding đến một mảng đường dẫn hoặc NavigationPath.

NavigationLink trong List: các đặc điểm

NavigationLink trong List tự động hiển thị một chỉ báo tiết lộ (chevron) ở phía bên phải của hàng, báo hiệu cho người dùng rằng nhấn sẽ dẫn đến một màn hình khác. List quản lý việc hiển thị mũi tên tự động — không giống như NavigationLink thông thường bên ngoài danh sách, nơi không có mũi tên.

Với iOS 16, List với NavigationLink tự động sử dụng dạng value bên trong List(data:rowContent:). Khi sử dụng ForEach bên trong List, chỉ báo tiết lộ cũng được thêm tự động. Hành vi này không thể bị tắt thông qua các bộ sửa đổi — chỉ thay thế NavigationLink bằng Button mới có thể loại bỏ mũi tên.

Vấn đề với dạng destination trong List: nếu bạn sử dụng NavigationLink(destination:label:) bên trong List, tất cả các View đích được tạo ngay lập tức khi tải danh sách, bất kể người dùng đã nhấp vào liên kết hay chưa. Đối với danh sách có số lượng hàng lớn, điều này có thể làm chậm đáng kể quá trình tải ban đầu và tăng mức tiêu thụ bộ nhớ. Dạng value với NavigationStack giải quyết vấn đề này.

Theo WWDC 2022 (Session 10054), Apple khuyến nghị sử dụng NavigationStack và dạng value của NavigationLink cho các dự án mới. Điều này đặc biệt quan trọng đối với List có dữ liệu động, nơi số lượng hàng có thể lớn.

Các mẫu sử dụng NavigationLink

Mẫu 1: Giao diện tùy chỉnh của NavigationLink. NavigationLink chấp nhận bất kỳ View nào làm nhãn, cho phép tạo các thiết kế tùy chỉnh cho liên kết. Bên trong List, điều này đặc biệt thuận tiện — bạn nhận được chỉ báo tiết lộ tự động khi sử dụng NavigationLink.

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

Mẫu 2: NavigationLink không có mũi tên (nút tùy chỉnh). Nếu bạn không cần chỉ báo tiết lộ, hãy sử dụng Button để điều hướng lập trình: path.append(value). Điều này hữu ích cho các phần tử giao diện tùy chỉnh nơi NavigationLink trông không tự nhiên.

Mẫu 3: Điều hướng có điều kiện. Bạn có thể chặn NavigationLink bằng cách sử dụng destination trống hoặc không thêm .navigationDestination cho các giá trị nhất định. Điều hướng lập trình thông qua đường dẫn cho phép kiểm tra điều kiện trước khi thêm giá trị.

Theo Hacking with Swift (2024), hầu hết các vấn đề với NavigationLink liên quan đến việc sử dụng dạng destination trong các dự án cũ. Khi di chuyển sang NavigationStack, hãy thay thế tất cả NavigationLink(destination:label:) bằng NavigationLink(value:label:) và thêm .navigationDestination ở cấp gốc.