NavHost — یہ کیا ہے، Jetpack Compose میں نیویگیشن گراف اور روٹ بنانا

Jetpack Compose میں NavHost کیا ہے؟

NavHost ایک composable فنکشن ہے جو موجودہ نیویگیشن اسکرین دکھانے کے لیے ایک کنٹینر فراہم کرتا ہے۔ NavHost ایک NavController، startDestination اور Kotlin DSL کے ذریعے بنایا گیا روٹ گراف لیتا ہے۔ جب موجودہ روٹ بدلتا ہے، NavHost مخصوص اینیمیشن کے ساتھ دکھائے جانے والے composable کو سوئچ کرتا ہے۔

NavHost ایک اسکرین سوئچر کے طور پر کام کرتا ہے: یہ NavController سے موجودہ NavBackStackEntry کو ٹریک کرتا ہے اور متعلقہ composable بلاک کو رینڈر کرتا ہے۔ ہر اسکرین ایک آزاد composable فنکشن ہے جو روٹ آرگیومینٹس کے ساتھ NavBackStackEntry وصول کرتی ہے۔ تمام اسکرینیں ایک واحد کمپوزیشن ٹری میں موجود ہوتی ہیں، لیکن NavHost ایک بار میں صرف ایک دکھاتا ہے، باقی کو اینیمیشن کے ذریعے چھپاتا ہے۔

FragmentManager کے برعکس، NavHost ہر اسکرین کے لیے Fragment نہیں بناتا۔ پورا لائف سائیکل CompositionLifecycle کے ذریعے منظم کیا جاتا ہے — composable فنکشنز میں onStart/onResume نہیں ہوتا، اس لیے سائیڈ ایفیکٹس کے لیے LaunchedEffect اور DisposableEffect استعمال کیے جاتے ہیں۔ NavHost خود بخود NavController کو سبسکرائب کرتا ہے اور روٹ بدلنے پر UI کو دوبارہ کمپوز کرتا ہے۔

Google کے مطابق، NavHost Navigation 2.4.0 سے ایک مستحکم API ہے۔ 2.8.0 سے شروع کرتے ہوئے، NavHost Kotlin Serialization کے ذریعے Type-Safe نیویگیشن کو سپورٹ کرتا ہے، سٹرنگ روٹس کو ڈیٹا کلاسز سے بدل دیتا ہے۔ NavHost نیسٹڈ گراف کو بھی سپورٹ کرتا ہے، جو ماڈیول پر مبنی نیویگیشن تنظیم کو قابل بناتا ہے۔

NavHost بنانا اور startDestination ترتیب دینا

NavHost دو لازمی پیرامیٹرز کے ساتھ بنایا جاتا ہے: navController (NavHostController کی ایک مثال) اور startDestination (پہلی اسکرین کا روٹ سٹرنگ)۔ تیسرا پیرامیٹر ایک بلڈر بلاک ہے جہاں composable()، navigation() اور dialog() کے ذریعے تمام روٹس رجسٹر کیے جاتے ہیں۔

@Composable
fun AppNavHost(navController: NavHostController) {
    NavHost(
        navController = navController,
        startDestination = "home"
    ) {
        composable("home") { HomeScreen(navController) }
        composable("settings") { SettingsScreen(navController) }
    }
}

startDestination وہ روٹ ہے جو NavHost پہلی بار لانچ ہونے پر کھلتا ہے۔ اگر بیک اسٹیک خالی ہے، NavHost خود بخود startDestination کو اسٹیک میں شامل کرتا ہے۔ دوبارہ ترتیب دینے (اسکرین گھمانے) پر، NavHost savedState سے آخری روٹ بحال کرتا ہے، startDestination کو نہیں۔

BottomNavigation کے لیے، startDestination نیچے والے پینل کے روٹس میں سے ایک ہے۔ باقی پینل روٹس کو علیحدہ composable اندراجات کے طور پر شامل کیا جاتا ہے۔ NavHost کو Scaffold.content کے اندر رکھنا چاہیے — جہاں مرکزی ایپلیکیشن مواد دکھایا جاتا ہے۔ NavHost TopAppBar اور BottomNavigation کو چھوڑ کر تمام دستیاب اونچائی لیتا ہے۔

composable کے ذریعے روٹ رجسٹر کرنا

composable(route, arguments, deepLinks, enterTransition, exitTransition, content) فنکشن NavHost گراف میں ایک روٹ رجسٹر کرتا ہے۔ route پیرامیٹر ایک سٹرنگ ہے جو {paramName} کی شکل میں اختیاری پلیس ہولڈرز کے ساتھ راستہ بیان کرتی ہے۔ نیویگیشن کے دوران پلیس ہولڈر کو ایک حقیقی قدر سے بدل دیا جاتا ہے۔

composable کا content بلاک ایک NavBackStackEntry وصول کرتا ہے جس سے آرگیومینٹس نکالے جاتے ہیں۔ اسکرین کا composable فنکشن صرف اس وقت رینڈر ہوتا ہے جب موجودہ NavController روٹ روٹ سے میل کھاتا ہے۔ مماثلت نہ ہونے پر، composable کمپوزیشن سے ہٹا دیا جاتا ہے، لیکن اس کی حالت rememberSaveable یا SavedStateHandle کے ساتھ ViewModel کے ذریعے محفوظ کی جا سکتی ہے۔

composable(
    route = "article/{articleId}",
    arguments = listOf(navArgument("articleId") {
        type = NavType.IntType
        defaultValue = 0
    }),
    deepLinks = listOf(navDeepLink { uriPattern = "https://app.example/article/{articleId}" })
) { backStackEntry ->
    val articleId = backStackEntry.arguments?.getInt("articleId") ?: 0
    ArticleScreen(articleId = articleId)
}

NavHost کے اندر composable اندراجات کی تعداد چند سے سینکڑوں تک ہو سکتی ہے۔ بڑی ایپلیکیشنز کے لیے، روٹس ماڈیولز کے درمیان تقسیم ہوتے ہیں اور نیسٹڈ گراف کے ذریعے جڑے ہوتے ہیں۔ ہر composable کی اپنی اینیمیشن سیٹنگز، ڈیپ لنکس اور آرگیومینٹس ہو سکتے ہیں۔

آرگیومینٹس اور ٹائپ شدہ روٹ پیرامیٹرز

روٹ آرگیومینٹس composable() میں arguments: List<NamedNavArgument> پیرامیٹر کے ذریعے بیان کیے جاتے ہیں۔ ہر آرگیومینٹ navArgument(name) { type; defaultValue } کے ذریعے بیان کیا جاتا ہے۔ NavType آرگیومینٹ کی قسم متعین کرتا ہے: StringType، IntType، LongType، FloatType، BoolType، ParcelableType اور ReferenceType۔

آرگیومینٹس NavBackStackEntry سے arguments?.getInt("id") کے ذریعے نکالے جاتے ہیں۔ لازمی آرگیومینٹس کے لیے، defaultValue چھوڑا جا سکتا ہے — NavType null استعمال کرے گا۔ اختیاری آرگیومینٹس کے لیے defaultValue سیٹ ہونا چاہیے، ورنہ پیرامیٹر غائب ہونے پر نیویگیشن ایک استثناء پھینکے گی۔

Navigation 2.8.0 سے، Type-Safe نیویگیشن کی سفارش کی جاتی ہے: Kotlin Serialization کے ساتھ روٹس کے لیے ایک sealed class یا data class بیان کریں۔ سٹرنگ روٹ کے بجائے، composable<RouteType> { backStackEntry -> } استعمال کریں۔ یہ روٹس میں ٹائپنگ کی غلطیوں کو ختم کرتا ہے اور آرگیومینٹس کے لیے خود بخود NavType پیدا کرتا ہے۔ منتقلی کے لیے، navigation-compose-typesafe انحصار اور Kotlin Serialization پلگ ان شامل کریں۔

نیسٹڈ نیویگیشن گراف

nested graphs — navigation(route, startDestination) فنکشن استعمال کرکے NavHost کے اندر روٹس کو گروپ کرنے کا ایک طریقہ کار۔ نیسٹڈ گراف کا اپنا روٹ سابقہ اور startDestination ہوتا ہے، اور اس کے تمام روٹس سابقہ کے ذریعے قابل رسائی ہوتے ہیں۔ نیسٹڈ گراف ماڈیولر آرکیٹیکچر کے لیے استعمال ہوتے ہیں، جہاں ہر فیچر ماڈیول اپنا ذیلی گراف رجسٹر کرتا ہے۔

نیسٹڈ گراف کے فوائد: ماڈیول کے اندر روٹ تنہائی، اسکرینوں کے ایک گروپ کے لیے متحد بیک اسٹیک، اور اندرونی ساخت ظاہر کیے بغیر سابقہ کے ذریعے نیویگیٹ کرنے کی صلاحیت۔ مثال کے طور پر، "auth" گراف میں "auth/login" اور "auth/register" شامل ہیں۔ نیویگیشن مکمل روٹ کے ذریعے یا startDestination پر ری ڈائریکٹ کے ساتھ سابقہ کے ذریعے ممکن ہے۔

NavHost(navController = navController, startDestination = "main") {
    composable("main") { MainScreen(navController) }
    navigation(
        route = "auth",
        startDestination = "auth/login"
    ) {
        composable("auth/login") { LoginScreen(navController) }
        composable("auth/register") { RegisterScreen(navController) }
    }
}

نیسٹڈ گراف گراف کی سطح پر آرگیومینٹ پاسنگ کو سپورٹ کرتے ہیں: گراف کے روٹ میں اعلان کردہ پیرامیٹرز تمام اندرونی روٹس کو پاس کیے جاتے ہیں۔ نیسٹڈ گراف صاف کرنے کے لیے، popBackStack(route) استعمال کریں — یہ تمام اندرونی اندراجات کو ہٹا دے گا۔ نیسٹڈ گراف کی گہرائی کی کوئی حد نہیں ہے، لیکن پڑھنے کی اہلیت کے لیے 3 سے زیادہ سطحوں کی سفارش نہیں کی جاتی۔

اینیمیشن اور ٹرانزیشن حسب ضرورت

NavHost enterTransition، exitTransition، popEnterTransition اور popExitTransition پیرامیٹرز کے ذریعے composable روٹس کے درمیان ٹرانزیشن اینیمیشن کو سپورٹ کرتا ہے۔ اینیمیشنز ایک بار NavHost کے لیے سیٹ کی جاتی ہیں اور تمام روٹس پر لاگو ہوتی ہیں، یا ہر composable کے لیے انفرادی طور پر۔ ڈیفالٹ طور پر، اینیمیشنز غیر فعال ہوتی ہیں۔

عام ترتیب: enterTransition = slideInHorizontally(initialOffsetX = { it }) — اسکرین دائیں طرف سے اندر سلائیڈ ہوتی ہے; exitTransition = slideOutHorizontally(targetOffsetX = { -it }) — اسکرین بائیں طرف باہر سلائیڈ ہوتی ہے۔ پاپ اینیمیشن کے لیے، سمتیں الٹ جاتی ہیں: اسکرین بائیں طرف سے اندر سلائیڈ ہوتی ہے اور دائیں طرف باہر سلائیڈ ہوتی ہے۔ BottomNavigation کے لیے، سلائیڈ کے بغیر fadeIn/fadeOut استعمال کیا جاتا ہے۔

NavHost(
    navController = navController,
    startDestination = "home",
    enterTransition = { slideInHorizontally(initialOffsetX = { it }) + fadeIn() },
    exitTransition = { slideOutHorizontally(targetOffsetX = { -it }) + fadeOut() },
    popEnterTransition = { slideInHorizontally(initialOffsetX = { -it }) + fadeIn() },
    popExitTransition = { slideOutHorizontally(targetOffsetX = { it }) + fadeOut() }
) { /* composable routes */ }

حسب ضرورت اینیمیشنز Compose Animation API استعمال کرکے بنائی جاتی ہیں: AnimatedContentTransitionScope کنٹینر کے طول و عرض، اینیمیشن کی پیشرفت اور سمت تک رسائی فراہم کرتا ہے۔ مشترکہ عنصر ٹرانزیشن (ایک عنصر آسانی سے دوسری اسکرین پر منتقل ہوتا ہے) کے لیے، Accompanist Navigation Animation لائبریری یا sharedElement Modifier کے ذریعے حسب ضرورت نفاذ درکار ہے۔ Android Developers (2025) کے مطابق، ڈیفالٹ سلائیڈ اینیمیشن (دائیں سے داخل، بائیں سے خارج) نیویگیشن والی 80% Android ایپلیکیشنز میں استعمال ہوتی ہے۔