NavigationLink — چیست، دکمه انتقال در SwiftUI

NavigationLink در SwiftUI چیست؟

NavigationLink Viewای است که با کلیک، یک انتقال ناوبری را آغاز می‌کند. در داخل NavigationStack، کلیک روی NavigationLink صفحه مقصد را روی پشته قرار می‌دهد و دکمه سیستم «برگشت» را نمایش می‌دهد. NavigationLink از iOS 13 وجود دارد و روش اصلی ناوبری کاربر در SwiftUI است.

NavigationLink از UIButton ارث‌بری نمی‌کند — این یک View SwiftUI است که به طور خودکار با زمینه سازگار می‌شود. در داخل List، NavigationLink با فلش افشا (disclosure indicator) نمایش داده می‌شود. خارج از لیست، NavigationLink مانند یک دکمه معمولی رفتار می‌کند، اما با رفتار ناوبری.

به گفته SwiftUI Lab (2024)، NavigationLink یکی از پراستفاده‌ترین Viewها در برنامه‌های SwiftUI است و فقط از Text، Image و VStack عقب‌تر است. درک تفاوت‌های بین فرم‌های مقداردهی برای عملکرد و رفتار قابل پیش‌بینی ناوبری حیاتی است.

NavigationLink چگونه در زیرساخت کار می‌کند

با کلیک، NavigationLink یک مقدار (یا destination) را به پشته ناوبری مرتبط با نزدیک‌ترین NavigationStack یا NavigationView اضافه می‌کند. SwiftUI از EnvironmentValue برای انتقال مسیر ناوبری از طریق سلسله‌مراتب View استفاده می‌کند. NavigationLink این مسیر را از Environment می‌خواند و هنگام کلیک آن را تغییر می‌دهد.

فرم‌های مقداردهی NavigationLink

NavigationLink دو فرم اصلی دارد: با destination (نشان دادن مستقیم View مقصد) و با value (مقدار برای NavigationDestination). انتخاب فرم به نسخه iOS و معماری ناوبری بستگی دارد.

فرم Destination (iOS 13+): NavigationLink(destination: DetailView(), label: { Text(«Open») }). این فرم بلافاصله هنگام رندر NavigationLink DetailView را ایجاد می‌کند، حتی اگر کاربر روی لینک کلیک نکرده باشد. این منجر به مقداردهی زودهنگام View و مشکلات بالقوه عملکرد می‌شود، اگر View مقصد عملیات سنگینی در مقداردهنده انجام دهد.

فرم Value (iOS 16+): NavigationLink(value: «detail_42», label: { Text(«Open») }). View مقصد فقط هنگام کلیک روی لینک ایجاد می‌شود، زمانی که SwiftUI .navigationDestination مربوطه را پیدا می‌کند. این از مقداردهی زودهنگام جلوگیری می‌کند و ناوبری را قابل پیش‌بینی‌تر می‌کند.

NavigationLink با NavigationStack: استفاده صحیح

NavigationLink با NavigationStack در iOS 16+ نیاز به تغییر به فرم value دارد. شما نوع داده را برای ناوبری (String، Int، enum Route) تعریف کرده و destination را از طریق .navigationDestination ثبت می‌کنید. NavigationLink فقط مقدار را در پشته قرار می‌دهد و SwiftUI View مقصد را هنگام کلیک ایجاد می‌کند.

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

// ناوبری برنامه‌ای:
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("باز کردن تنظیمات") {
                        path.append(AppRoute.settings)
                    }
                }
        }
    }
}

ناوبری برنامه‌ای: افزودن مقدار به path (از طریق path.append) معادل کلیک روی NavigationLink با همان مقدار است. این امکان پیاده‌سازی ناوبری از ViewModel، Coordinator یا در پاسخ به اعلان‌های push را فراهم می‌کند.

فرم IsActive (NavigationLink(isActive:destination:label:)) برای سازگاری در دسترس است، اما در iOS 16+ توصیه نمی‌شود. از فرم value با Binding به آرایه مسیر یا NavigationPath استفاده کنید.

NavigationLink در List: ویژگی‌ها

NavigationLink در List به طور خودکار یک فلش افشا (chevron) در سمت راست ردیف نمایش می‌دهد که به کاربر نشان می‌دهد کلیک منجر به انتقال به صفحه دیگر می‌شود. List نمایش فلش را به طور خودکار مدیریت می‌کند — برخلاف NavigationLink معمولی خارج از لیست، که در آن فلش وجود ندارد.

از iOS 16، List با NavigationLink به طور خودکار از فرم value در داخل List(data:rowContent:) استفاده می‌کند. هنگام استفاده از ForEach در داخل List، فلش افشا نیز به طور خودکار اضافه می‌شود. این رفتار را نمی‌توان از طریق modifierها غیرفعال کرد — فقط جایگزینی NavigationLink با Button می‌تواند فلش را حذف کند.

مشکل فرم destination در List: اگر از NavigationLink(destination:label:) در داخل List استفاده می‌کنید، تمام Viewهای مقصد بلافاصله هنگام بارگذاری لیست ایجاد می‌شوند، صرف نظر از اینکه کاربر روی لینک کلیک کرده باشد یا نه. برای لیست‌هایی با تعداد ردیف زیاد، این می‌تواند بارگذاری اولیه را به طور قابل توجهی کند کرده و مصرف حافظه را افزایش دهد. فرم value با NavigationStack این مشکل را حل می‌کند.

به گفته WWDC 2022 (Session 10054)، اپل استفاده از NavigationStack و فرم value NavigationLink را برای پروژه‌های جدید توصیه می‌کند. این به ویژه برای List با داده‌های پویا، که تعداد ردیف‌ها می‌تواند زیاد باشد، مهم است.

الگوهای استفاده از NavigationLink

الگوی 1: ظاهر سفارشی NavigationLink. NavigationLink هر Viewای را به عنوان label می‌پذیرد و امکان ایجاد طرح دلخواه برای لینک را فراهم می‌کند. در داخل List این بسیار راحت است — با استفاده از 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)
}

الگوی 2: NavigationLink بدون فلش (دکمه سفارشی). اگر به فلش افشا نیاز ندارید، از Button برای ناوبری برنامه‌ای استفاده کنید: path.append(value). این برای عناصر رابط سفارشی که NavigationLink در آنها طبیعی به نظر نمی‌رسد مفید است.

الگوی 3: ناوبری شرطی. می‌توانید NavigationLink را با استفاده از destination خالی یا با عدم افزودن .navigationDestination برای مقادیر خاص مسدود کنید. ناوبری برنامه‌ای از طریق path به شما امکان می‌دهد قبل از افزودن مقدار، شرایط را بررسی کنید.

به گفته Hacking with Swift (2024)، بیشتر مشکلات NavigationLink مربوط به استفاده از فرم destination در پروژه‌های قدیمی است. هنگام مهاجرت به NavigationStack، تمام NavigationLink(destination:label:) را با NavigationLink(value:label:) جایگزین کرده و .navigationDestination را در سطح ریشه اضافه کنید.