नेविगेशन 3

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 साफ़ हो जाता है.

  1. डिपेंडेंसी जोड़ें:

    implementation("androidx.lifecycle:lifecycle-viewmodel-navigation3:...")
    
  2. आपके NavDisplay's entryDecorators में, ViewModel स्टोर डेकोरेटर जोड़ें. Compose rememberSaveable की स्थिति बनाए रखने के लिए, कस्टम डेकोरेटर उपलब्ध कराते समय, आपको 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()
            }
        }
    )