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 builder सिंटैक्स के माध्यम से सेट किए जाते हैं: 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 बटन (hardware back button) को संभालने के लिए, 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 का समर्थन करता है। जटिल ऑब्जेक्ट के लिए, केवल ID सहेजें और रिपॉजिटरी से पूर्ण डेटा लोड करें। 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 में एक एकल स्रोत बनाएं और UI में State भेजें।