Navigation 3, Jetpack Compose के लिए बनाई गई नेविगेशन लाइब्रेरी है. इस गाइड में, Wear OS के ऐप्लिकेशन में Navigation 3 को लागू करने का तरीका बताया गया है.
बुनियादी कॉन्सेप्ट
NavKey: यह आपके ऐप्लिकेशन में, किसी डेस्टिनेशन (स्क्रीन) के लिए, टाइप-सेफ़ और क्रम से लगाए जा सकने वाला आइडेंटिफ़ायर है.NavBackStack: यहNavKeyइंस्टेंस की ऐसी सूची है जिसे बदला जा सकता है. यह सूची, नेविगेशन के इतिहास को दिखाती है. इस सूची से, आइटम सीधे पुश और पॉप किए जा सकते हैं.rememberNavBackStack: यह एक कंपोज़ेबल है, जो कॉन्फ़िगरेशन में हुए बदलावों और प्रोसेस के बंद होने पर, बैक स्टैक को बनाता और सेव रखता है.NavDisplay: यह मुख्य यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट है, जो बैक स्टैक को मॉनिटर करता है और चालू स्क्रीन को रेंडर करता है.EntryProvider: यह मैपिंग डीएसएल है, जोNavKeyको उसके असली@Composableयूज़र इंटरफ़ेस (यूआई) से लिंक करता है.SwipeDismissableSceneStrategy: यह Wear के लिए खास तौर पर बनाई गई रणनीति है. यह आपकी स्क्रीन को, स्वाइप करके बंद करने के जेस्चर में रैप करती है. साथ ही, यह बिल्ट-इन बैक ऐनिमेशन को मैनेज करती है.
पहला चरण: डिपेंडेंसी जोड़ना
अपने प्रोजेक्ट में, Navigation 3, Wear Compose, और क्रम से लगाने की ज़रूरी डिपेंडेंसी जोड़ें.
शानदार
dependencies { // Core Navigation 3 APIs implementation "androidx.navigation3:navigation3-runtime:1.2.0-alpha02" implementation "androidx.navigation3:navigation3-ui:1.2.0-alpha02" // Wear OS specific Navigation 3 integration implementation "androidx.wear.compose:compose-navigation3:1.6.1" // Kotlinx Serialization for type-safe routing implementation "org.jetbrains.kotlinx:kotlinx-serialization-json:1.10.0" }
Kotlin
dependencies { // Core Navigation 3 APIs implementation("androidx.navigation3:navigation3-runtime:1.2.0-alpha02") implementation("androidx.navigation3:navigation3-ui:1.2.0-alpha02") // Wear OS specific Navigation 3 integration implementation("androidx.wear.compose:compose-navigation3:1.6.1") // Kotlinx Serialization for type-safe routing implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.10.0") }
दूसरा चरण: डेस्टिनेशन (NavKey तय करना)
स्क्रीन को, मज़बूत टाइप वाले, क्रम से लगाए जा सकने वाले ऑब्जेक्ट या डेटा क्लास के तौर पर तय किया जाता है. ये ऑब्जेक्ट या डेटा क्लास,
NavKey इंटरफ़ेस को लागू करते हैं.
@Serializable sealed interface Screen : NavKey { @Serializable data object Home : Screen @Serializable data class Details(val itemId: String) : Screen }
तीसरा चरण: NavDisplay और बैक स्टैक सेट अप करना
अपने ऐप्लिकेशन के रूट पर, बैक स्टैक और Wear OS सीन
की रणनीति को शुरू करें. इसके बाद, उन्हें NavDisplayमें प्लग करें.
// 1. Create the persistent back stack starting at the Home screen val backStack = rememberNavBackStack(Screen.Home) // 2. Initialize the Wear OS swipe-to-dismiss strategy val strategy = rememberSwipeDismissableSceneStrategy<NavKey>() // 3. Render the NavDisplay NavDisplay( backStack = backStack, sceneStrategies = listOf(strategy), entryProvider = entryProvider { // 4. Map keys to Composables entry<Screen.Home> { HomeScreen( onNavigateToDetails = { id -> backStack.add(Screen.Details(id)) } ) } entry<Screen.Details> { key -> DetailsScreen( itemId = key.itemId, onBack = { backStack.removeAt(backStack.lastIndex) } ) } } )
चौथा चरण: नेविगेशन से जुड़े ऐक्शन करना
बैक स्टैक, सिर्फ़ एक पसंद के मुताबिक बनाया गया MutableList होता है. इसलिए, नेविगेट करना बहुत आसान होता है. backStack इंस्टेंस पर सीधे तौर पर ये कार्रवाइयां की जा सकती हैं:
- आगे की ओर नेविगेट करना:
backStack.add(Screen.Details("123")) - पीछे की ओर नेविगेट करना:
backStack.removeLast()याbackStack.removeLastOrNull() - साफ़ करना और रीसेट करना:
backStack.clear(); backStack.add(Screen.Home)(या स्टैक को बदलने के लिए, सूची में की जाने वाली कार्रवाइयों का इस्तेमाल करें).
पांचवा चरण: (ज़रूरी नहीं) ViewModels को डेस्टिनेशन के हिसाब से स्कोप करना
डिफ़ॉल्ट रूप से, ViewModels को Activity के हिसाब से स्कोप किया जाता है. Navigation 3
, ViewModel को बैक स्टैक पर मौजूद NavEntry के हिसाब से सुरक्षित तरीके से
स्कोप करने के लिए, एक खास आर्टफ़ैक्ट (lifecycle-viewmodel-navigation3) उपलब्ध कराता है. जब डेस्टिनेशन को बैक स्टैक से पॉप किया जाता है, तो ViewModel साफ़ हो जाता है.
डिपेंडेंसी जोड़ें:
implementation("androidx.lifecycle:lifecycle-viewmodel-navigation3:...")आपके
NavDisplay'sentryDecoratorsमें, ViewModel स्टोर डेकोरेटर जोड़ें. ComposerememberSaveableकी स्थिति बनाए रखने के लिए, कस्टम डेकोरेटर उपलब्ध कराते समय, आपकोSaveableStateHolderNavEntryDecoratorको भी साफ़ तौर पर शामिल करना होगा:NavDisplay( backStack = backStack, sceneStrategies = listOf(strategy), entryDecorators = listOf( rememberSaveableStateHolderNavEntryDecorator(), rememberViewModelStoreNavEntryDecorator() ), entryProvider = entryProvider { entry<Screen.Home> { // Any viewModel() requested here will be scoped to this NavEntry val viewModel: HomeViewModel = viewModel() } } )