NavController — جوہر، طریقے اور Jetpack Compose میں نیویگیشن کا نظم

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

NavController Navigation Compose لائبریری کی ایک کلاس ہے جو Compose ایپلیکیشنز کے لیے نیویگیشن کنٹرولر لاگو کرتی ہے۔ NavController NavBackStackEntry اسٹیک کا نظم کرتا ہے، جہاں ہر اندراج میں راستہ، دلائل اور اسکرین کی حالت ہوتی ہے۔ کنٹرولر بنیادی نیویگیشن آپریشنز کو سپورٹ کرتا ہے: منتقلی، واپسی، تبدیلی اور صفائی۔

View سسٹم کے برعکس، جہاں نیویگیشن FragmentManager یا Intent کے ذریعے ہوتی تھی، NavController صرف Compose سیاق و سباق میں کام کرتا ہے۔ Back stack Fragment اسٹیک کی بجائے NavDestination گراف کے طور پر محفوظ کیا جاتا ہے۔ یہ Fragment بنانے اور ختم کرنے کے اوور ہیڈ کو ختم کرتا ہے اور جانچ کو آسان بناتا ہے — NavController کو TestNavHostController کے ذریعے موک کیا جا سکتا ہے۔

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

Google کے مطابق، NavController کئی بڑی ریلیز سے گزرا ہے۔ ورژن 2.8.0 نے Type-Safe Navigation شامل کیا، ورژن 2.9.0 نے predictive back gesture (Android 14+) کے لیے سپورٹ شامل کیا۔ کنٹرولر Material3 Scaffold اور BottomNavigation کے ساتھ مطابقت رکھتا ہے۔ ملٹی ماڈیول پروجیکٹس کے لیے، NavController DI (Hilt/Koin) یا کنسٹرکٹر پیرامیٹرز کے ذریعے بھیجا جاتا ہے۔

NavController بنانا اور ترتیب دینا

NavController composable فنکشن rememberNavController() کے ذریعے بنایا جاتا ہے۔ فنکشن موجودہ composable کی زندگی کے دور سے منسلک NavHostController (NavController کا ذیلی طبقہ) کی ایک مثال لوٹاتا ہے۔ کمپوزیشن چھوڑنے پر، کنٹرولر صاف ہو جاتا ہے۔ دوبارہ ترتیب دینے کے دوران کنٹرولر کو محفوظ رکھنے کے لیے، rememberSaveable یا ViewModel استعمال کریں۔

@Composable
fun MyApp() {
    val navController = rememberNavController()
    NavHost(
        navController = navController,
        startDestination = "main"
    ) {
        composable("main") { MainScreen(navController) }
        composable("details") { DetailsScreen(navController) }
    }
}

NavController کی ترتیب میں شامل ہیں: NavHostController (اہم)، TestNavHostController (جانچ) اور ScopedNavController (اندرونی گراف کے لیے ذیلی)۔ BottomNavigation کے لیے، NavController پوری ایپ کے لیے واحد ہونا چاہیے — ہر ٹیب میں نیا کنٹرولر بنانے سے اسٹیک ختم ہو جائے گا۔ کنٹرولر کو اندرونی اسکرینوں پر بھیجنے کے لیے، پڑھنے کی اہلیت برقرار رکھنے کے لیے CompositionLocalProvider کی بجائے فنکشن پیرامیٹر استعمال کریں۔

نیویگیشن کی جانچ کے لیے compose-test-rule کے ساتھ TestNavHostController استعمال کریں۔ کنٹرولر ابتدائی راستہ سیٹ کرنے اور تصدیق کرنے کی اجازت دیتا ہے کہ navigate() نے متوقع منتقلی کو متحرک کیا۔ NavController کی جانچ کے لیے ایمولیٹر کی ضرورت نہیں — یہ Compose Test Semantics میچرز کے ساتھ کام کرتا ہے۔

navigate طریقہ: پیرامیٹرز اور NavOptions

navigate(route: String) طریقہ NavController میں بنیادی نیویگیشن میکانزم ہے۔ یہ ایک راستہ سٹرنگ، اختیاری NavOptions اور Navigator.Extras قبول کرتا ہے۔ NavOptions منتقلی کے رویے کو کنٹرول کرتے ہیں: launchSingleTop (اسٹیک میں راستہ نقل نہ کریں)، popUpTo (ایک راستے تک اسٹیک صاف کریں)، restoreState (پچھلی حالت بحال کریں)۔

NavOptions بلڈر نحو (NavOptionsBuilder) کے ذریعے سیٹ کیے جاتے ہیں۔ اہم پیرامیٹرز: popUpTo (راستہ + inclusive/saveState)، launchSingleTop (Boolean، true — نقل نہ بنائیں)، restoreState(واپسی پر حالت بحال کریں)۔ popUpTo کے بغیر، ہر navigate() اسٹیک میں ایک اندراج شامل کرتا ہے، جس سے back stack جمع ہوتا ہے اور Back بٹن کا غلط رویہ ہوتا ہے۔

navController.navigate("profile/42") {
    popUpTo("main") { saveState = true }
    launchSingleTop = true
    restoreState = true
}

Navigator.Extras راستے کا حصہ نہ ہونے والے اضافی ڈیٹا (اینیمیشن کے لیے مشترکہ عناصر، Intent پرچم، Pac-Man بنڈل) بھیجنے کی اجازت دیتا ہے۔ Extras شاذ و نادر ہی استعمال ہوتے ہیں — بنیادی طور پر Accompanist Animation یا اپنی مرضی کے Navigator کے ساتھ انضمام کے لیے۔ زیادہ تر منظرناموں کے لیے، ایک راستہ سٹرنگ اور NavOptions کافی ہیں۔

popBackStack: واپسی اور اسٹیک صفائی کا نظم

popBackStack() پچھلی اسکرین پر واپسی کا طریقہ ہے۔ بغیر دلائل کے، یہ اسٹیک کی سب سے اوپر والی اندراج کو ہٹاتا ہے اور کامیابی پر true لوٹاتا ہے۔ اگر اسٹیک خالی ہے، طریقہ false لوٹاتا ہے اور Activity بند ہو جاتی ہے (super.onBackPressed() کی طرح)۔

اوور لوڈڈ ورژن popBackStack(route: String, inclusive: Boolean) مخصوص راستے تک تمام اندراجات کو ہٹاتا ہے۔ اگر inclusive = true ہے، تو مخصوص راستہ بھی ہٹا دیا جاتا ہے۔ طریقہ Boolean لوٹاتا ہے — اندراجات ملنے اور ہٹانے پر true۔ inclusive والا ورژن اختیار یا آرڈر مکمل کرنے کے بعد «روٹ اسکرین پر باہر نکلیں» منظرناموں کے لیے مفید ہے۔

سسٹم Back بٹن (ہارڈویئر بیک بٹن) کو ہینڈل کرنے کے لیے Compose کا BackHandler استعمال کریں۔ BackHandler enabled اور onBack قبول کرتا ہے — دبانے پر کال بیک۔ Android 14+ کے لیے، PredictiveBackGesture استعمال کیا جاتا ہے، جو NavController ورژن 2.9.0 سے مربوط ہے۔ Predictive back واپسی کا پیش نظارہ اینیمیشن شامل کرتا ہے۔

SavedStateHandle: اسکرین کی حالت محفوظ رکھنا

SavedStateHandle نیویگیشن اور دوبارہ ترتیب دینے کے دوران ViewModel کی حالت محفوظ رکھنے کا ایک میکانزم ہے۔ NavController ہر NavBackStackEntry کے لیے خود بخود SavedStateHandle فراہم کرتا ہے۔ SavedStateHandle کے ذریعے، ViewModel اسکرین کی حالت محفوظ کرتا ہے اور واپسی پر بحال کرتا ہے (restoreState = true)۔

Navigation Compose میں، SavedStateHandle ViewModel کے ساتھ استعمال ہوتا ہے: ViewModel SavedStateHandle کے ذریعے شروع کیا جاتا ہے، جو backStackEntry سے بھیجا جاتا ہے۔ دوسری اسکرین پر جا کر واپس آنے پر (restoreState کے ساتھ)، ViewModel نئے سرے سے بننے کی بجائے محفوظ کردہ حالت حاصل کرتا ہے۔ یہ ڈیٹا انپٹ، فلٹرز یا اسکرول والی اسکرینوں کے لیے اہم ہے۔

class ProfileViewModel(
    private val savedStateHandle: SavedStateHandle
) : ViewModel() {
    val userId: String = savedStateHandle.get<String>("userId") ?: ""
    var searchQuery by savedStateHandle.getStateFlow("search", "")
        .collectAsState()
}

SavedStateHandle قدیم اقسام، String، Bundle اور Parcelable کو سپورٹ کرتا ہے۔ پیچیدہ اشیاء کے لیے، صرف IDs محفوظ کریں اور کامل ڈیٹا ذخیرے سے لوڈ کریں۔ SavedStateHandle کی حد تقریباً 1 MB ہے، اس سے تجاوز کرنے پرTransactionTooLargeException ہوتا ہے۔ بڑی مقدار کے لیے، handle میں محفوظ کرنے کی بجائے Room یا DataStore استعمال کریں۔

اہم: SavedStateHandle صرف اس وقت حالت محفوظ رکھتا ہے جب NavOptions میں restoreState = true استعمال کیا جائے۔ اگر restoreState مخصوص نہیں ہے، تو واپسی پر ViewModel ڈیفالٹ اقدار کے ساتھ نئے سرے سے بنتا ہے۔ restoreState کے ساتھ BottomNavigation سوئچنگ کے لیے، NavController ہر ٹیب کی حالت محفوظ رکھتا ہے اور دوبارہ انتخاب پر بحال کرتا ہے۔

currentBackStackEntryAsState کے ذریعے موجودہ راستے کا مشاہدہ

currentBackStackEntryAsState() ایک فنکشن ہے جو State<NavBackStackEntry?> لوٹاتا ہے، جو موجودہ راستے کی ہر تبدیلی پر اپ ڈیٹ ہوتا ہے۔ یہ نیویگیشن کے ساتھ UI ہم آہنگی کا بنیادی میکانزم ہے: BottomNavigation فعال آئٹم کو نمایاں کرتا ہے، Toolbar عنوان اپ ڈیٹ کرتا ہے، Drawer منتقلی پر بند ہوتا ہے۔

فنکشن snapshotFlow اور collectAsState کے ذریعے کام کرتا ہے: جب back stack تبدیل ہوتا ہے، Compose سبسکرائب کردہ عناصر کو دوبارہ کمپوز کرتا ہے۔ اہم: currentBackStackEntryAsState() صرف منتقلی اینیمیشن مکمل ہونے کے بعد اپ ڈیٹ ہوتا ہے۔ فوری اپ ڈیٹس کے لیے، currentDestination استعمال کریں، جو navigate() کے ساتھ ہم وقت تبدیل ہوتا ہے لیکن حالت کو سپورٹ نہیں کرتا۔

val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = navBackStackEntry?.destination?.route

Text(
    text = when (currentRoute) {
        "home" -> "Home"
        "profile" -> "Profile"
        else -> ""
    }
)

موجودہ راستے کے دلائل تک رسائی کے لیے navBackStackEntry?.arguments استعمال کریں۔ یہ BottomNavigation میں آسان ہے: selectedItem کا حساب currentRoute کی بنیاد پر کیا جاتا ہے۔ نیویگیشن ڈیبگنگ کے لیے NavController.addOnDestinationChangedListener() استعمال کریں جو ہر منتقلی کو لاگ کرتا ہے۔ پروڈکشن میں، بڑی تعداد میں composable کے اندر سبسکرپشنز سے بچیں — ViewModel میں ایک واحد ذریعہ بنائیں اور State کو UI میں بھیجیں۔